Question

我需要将表中特定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元素的动态宽度（表的中心部分）。

那么，我该怎么做呢？

Answer 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>

Answer 2

您可以使用max属性修复宽度和高度。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: