设置表格列宽度常量，而不考虑其单元格中的文本量如何？

在我的表格中，我将一列中第一个单元格的宽度设置为100px。
但是，如果此列中一个单元格中的文本太长，则该列的宽度大于100px。如何禁用此扩展？

我玩了一段时间，因为我很难弄清楚。

您需要设置像元宽度（无论是工作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中

这个人有一个类似的问题：表格单元格的宽度-固定宽度，包裹/截断长单词

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

在table标记之后，使用col元素。您不需要结束标记。

例如，如果您有三列：

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

只需在<div>内部添加标签<td>或在内部<th>定义宽度<div>。这将为您提供帮助。没有其他办法。

例如。

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

如果您需要一个或多个固定宽度的列，而其他列应重新设置大小，请尝试同时将min-width和设置max-width为相同的值。

您需要在相应的CSS中编写此代码

table-layout:fixed;

我要做的是：

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

将class属性放置到任何<td>您想要的位置。

我用这个

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

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

如果您不希望使用固定的布局，请为该列指定一个适当大小的类。

CSS：

.special_column { width: 120px; }

HTML：

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

使用width：auto放置最后一个“填充单元”也有帮助。这将占用剩余空间，并保留所有指定的其他尺寸。

当小屏幕小于固定宽度时，使可接受的答案响应小屏幕。

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/

设置此：

style="min-width:100px;" 

为我工作。

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>

根据我在这里的回答，也可以使用表头（可以为空）并为每个表头单元格应用相对宽度。表格主体中所有单元格的宽度将与其列标题的宽度一致。例：

的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按照Hyathin的答案中的建议使用。

我在想要设置最小宽度的单元格中使用:: after元素，而不管出现的文本如何，如下所示：

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

我不必在表父上设置宽度，也不必使用表布局。

我发现KAsun的答案使用vw而不是px更好，像这样：

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

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

您不需要设置"fixed"- overflow:hidden因为设置了列宽，所以只需要设置即可。