如何将特定 TD 的宽度设置为其内容宽度？答案

【问题标题】：how to set the width of a particular TD to its content width?如何将特定 TD 的宽度设置为其内容宽度？
【发布时间】：2018-05-04 03:41:27
【问题描述】：

我需要将表格中特定 TD 元素的宽度设置为其内容宽度，但由于从数据库加载的动态数据，此内容是可变的。

这就是我所拥有的：

<html>
<head>
    <style>
        div.block {
            display: inline-block;
            font-family: monospace;
        }
        .debug1 {
            border: solid blue 1px;
        }
        .debug2 {
            border: solid red 1px;
        }
    </style>
</head>
<body>
    <table style="width: 600px; border: solid black 1px;">
        <tbody>
            <tr>
                <td class=debug1 style="text-align: right;">
                    &#x25C4;
                </td>
                <td style="text-align: center;">
                    <div class="block debug2">700000</div>
                    <div class="block debug2">700001</div>
                    <div class="block debug2">700002</div>
                </td>
                <td class=debug1>
                    &#x25BA;
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

小提琴：https://jsfiddle.net/wm592qj2/

这就是我想要的：

<html>
<head>
    <style>
        div.block {
            display: inline-block;
            font-family: monospace;
        }
        .debug1 {
            border: solid blue 1px;
        }
        .debug2 {
            border: solid red 1px;
        }
    </style>
</head>
<body>
    <table style="width: 600px; border: solid black 1px; table-layout: fixed;">
        <tbody>
            <tr>
                <td class=debug1 style="width: 200px; text-align: right;">
                    &#x25C4;
                </td>
                <td style="width: 160px; border: solid cyan 1px; text-align: center;">
                    <div class="block debug2">700000</div>
                    <div class="block debug2">700001</div>
                    <div class="block debug2">700002</div>
                </td>
                <td class=debug1 style="width: 200px;">
                    &#x25BA;
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

小提琴https://jsfiddle.net/yj9oy9gs/

回顾：

我希望记录列表（block 类）显示在中心，因此 TD 元素的宽度必须设置为其内容的宽度，但内容始终是可变的（它可能有3 个 div，或者它可能有 10 个 div）
我希望 Next 和 Previous 按钮与最后一个和第一个 div 相邻（记录，即类 block）。我正在实现一个记录浏览器，所以它必须看起来不错。

请注意，第二个小提琴具有固定宽度，这就是它起作用的原因，但我对第二个 TD 元素（表格的中心部分）具有动态宽度。

那么，我该怎么做呢？

【问题讨论】：

标签： html css

【解决方案1】：

你可以让你的 table 表现得像一个 flex ，添加这些论文给你 table ：

display:flex; 
flex-direction:column; 
align-items: center;

<html>

<head>
  <style>
    div.block {
      display: inline-block;
      font-family: monospace;
    }
    
    .debug1 {
      border: solid blue 1px;
    }
    
    .debug2 {
      border: solid red 1px;
    }
  </style>
</head>

<body>
  <table style="display:flex; flex-direction:column; align-items: center; width: 600px; border: solid black 1px;">
    <tbody>
      <tr>
        <td class=debug1 style="text-align: right;">
          &#x25C4;
        </td>
        <td style="text-align: center;">
          <div class="block debug2">700000</div>
          <div class="block debug2">700001</div>
          <div class="block debug2">700002</div>          
        </td>
        <td class=debug1>
          &#x25BA;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

哇！这正是我所需要的。直到今天才知道flexbox，它真的很酷，用 HTML 构建布局很糟糕，但是 flex 让它变得如此简单。
现在我必须重写所有代码才能在任何地方使用flex 容器

【解决方案2】：

您可以使用 max 属性来固定宽度和高度。

我以 100px 为例，但您可以输入所需的值。

.block{
  max-width:100px;
  max-height:100px;
  overflow:auto;
}

<html>
<head>
	<style>
		div.block {
			display: inline-block;
			font-family: monospace;
		}
		.debug1 {
			border:	solid blue 1px;
		}
		.debug2 {
			border: solid red 1px;
		}
	</style>
</head>
<body>
	<table style="width: 600px; border: solid black 1px;">
		<tbody>
			<tr>
				<td class=debug1 style="text-align: right;">
					&#x25C4;
				</td>
				<td style="text-align: center;">
					<div class="block debug2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
					<div class="block debug2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
					<div class="block debug2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
				</td>
				<td class=debug1>
					&#x25BA;
				</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

【讨论】：