正确设置表格中单元格的比例答案

【问题标题】：Set the proportions of cells at table correct正确设置表格中单元格的比例
【发布时间】：2019-03-26 11:34:21
【问题描述】：

我在计算单元格的位置和宽度时遇到了一些问题。

总结，问题：

左栏宽度增加太快（内文正在写），偷走了右栏的空间，很重要的spase。

我的代码：

table {
  width: 100%;
}

td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>This</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much space</td>
    <td>1</td>
  </tr>
</table>

【问题讨论】：

你想要达到什么目的？
@NicolaeMaties 我想得到这样的东西：i.imgur.com/2fpqQ0F.png
任何人（正如我之前使用的投票一样），将其作为stackoverflow.com/questions/7613541/adjusting-table-cell-width的副本关闭
@EgorRandomize 添加这个类，它会如你所愿呈现：td:first-child { width: 1%; white-space: nowrap; }

标签： html css html-table

【解决方案1】：

table {
  width: 100%;
}
td:first-child {
  border: 1px solid black;
  white-space: nowrap;
}
td:last-child {
  border: 1px solid black;
  width: 100%;
}

<table>
  <tr>
    <td>This</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
   <td>This text escapes too much</td>
   <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much space</td>
    <td>1</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

这是你要找的吗？

table {
  width: 100%;
}
td {
  border: 1px solid black;
  white-space: nowrap;
}
td:nth-child(2){
  width: 100%;
}

<table>
  <tr>
    <td>This</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
   <td>This text escapes too much</td>
   <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much space</td>
    <td>1</td>
  </tr>
</table>

【讨论】：