设置表列宽度常数，无论其单元格中的文本量如何？

Question

在我的表中，我将第一个单元格的宽度设置为 100px.
但是，当该列中一个单元格中的文本太长时，该列的宽度变得比 100px. 。我如何禁用这种扩展？

Answer 1

我玩了一点，因为我很难弄清楚。

您需要设置单元格宽度（要么 th 或者 td 工作了，我都设置了）并设置了 table-layout 至 fixed. 。出于某种原因，单元格宽度似乎只有在设置了桌子宽度的情况下才能保持固定（我认为这很愚蠢，但whatev）。

另外，设置 overflow 财产为 hidden 为了防止任何额外的文本从桌子上脱出。

您也应该确保将所有边界和尺寸留给CSS。

好的，这就是我所拥有的：

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

在这里，它在JSFIDDLE

这个家伙也有类似的问题： 表单元格宽度 - 固定宽度，包装/截断长词

Answer 2

看：http://www.html5-tutorials.org/tables/changing-column-width/

表标签之后，使用col元素。您不需要关闭标签。

例如，如果您有三列：

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Answer 3

只是添加 <div> 在里面标记 <td> 或者 <th> 定义内部宽度 <div>. 。这将帮助您。没有其他作用。

例如。

<td><div style="width: 50px" >...............</div></td>

Answer 4

如果您需要一个矿石更多的固定宽度列，而其他列应该调整大小，请尝试设置两者 min-width 和 max-width 具有相同的值。

Answer 5

您需要在相应的CSS中写下此

table-layout:fixed;

Answer 6

我要做的是：

1. 设置TD宽度：

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>
   

2. 用CSS设置TD宽度：

   <td style="width:200px; height:50px;">
   

3. 再次将宽度设置为最大和最小CSS的宽度：

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
   

听起来有点重复，但它给了我理想的结果。为了轻松实现这一目标，您可能需要将CSS值放在样式表中的类中：

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

然后：

<td class="td_size">

将类属性放在任何 <td> 你要。

Answer 7

我用了

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Answer 8

它也有帮助，将最后一个“填充单元”放入 宽度：自动. 。这将占据剩余的空间，并将所有其他维度如指定。

Answer 9

如果您不想要固定的布局，请指定列适当尺寸的类。

CSS：

.special_column { width: 120px; }

html：

<td class="special_column">...</td>

Answer 10

Kasun有正确的主意。这是正确的代码...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Answer 11

当小于固定宽度时，让所接受的答案对小屏幕的答案。

html：

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS小提琴

https://jsfiddle.net/w9s3ebzt/

Answer 12

根据我的回答 这里, ，也可以使用 桌子头 （可以是空的）并为每个表格细胞应用相对宽度。桌子中所有细胞的宽度都将符合其柱头的宽度。例子：

html

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

查看结果

或者，使用 colgroup 正如海顿的回答中所建议的。

Answer 13

设置以下设置：

style="min-width:100px;" 

为我工作。

Answer 14

我发现Kasun的答案更好 大众 代替 Px 像这样：

<td><div style="width: 10vw" >...............</div></td>

这是我调整列宽所需要的唯一样式

Answer 15

您不需要设置 "fixed" - 您只需要设置 overflow:hidden 由于设置了列宽度。