时间戳

首页 > 解决方案 > 如何使表格的第二列更宽？

html - 如何使表格的第二列更宽？

问题描述

table {
  padding: 0;
}

table tr {
   border-top: 1px solid #cccccc;
  background-color: #ffffff;
   margin: 0;
  padding: 0;
}
table tr:nth-child(2n) {
  background-color: #f8f8f8;
}
table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}

table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}
table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}
table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}

以上是我的css。

<h2>Year 3: 2023</h2>

<table style="width:100%">
  <tr>
    <th>Lorem ipsum 1</th>
    <th>Lorem ipsum 2</th>
    <th>Lorem ipsum 3</th>
    <th>Lorem ipsum 4</th>
    <th>Lorem ipsum 5</th>
  </tr>
  <tr>
    <td>Dicta summo signiferumque cu pri</td>
    <td> Lorem ipsum dolor sit amet, persius convenire hendrerit nec at, impedit feugait pertinax mei ex. Ne erant reformidans sed. Blandit forensibus ex est, has repudiandae instructior eu, ut qui dicant accusamus ullamcorper. Qui an cetero placerat phaedrum, mel alia sale at. No pro ferri apeirian urbanitas, eos an unum detracto periculis, eos illum referrentur consequuntur at.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td>Dicta summo</td>
  </tr>
  <tr>
    <td>Dicta summo signiferumque cu pri</td>
    <td> Lorem ipsum dolor sit amet, persius convenire hendrerit nec at, impedit feugait pertinax mei ex. Ne erant reformidans sed. Blandit forensibus ex est, has repudiandae instructior eu, ut qui dicant accusamus ullamcorper. Qui an cetero placerat phaedrum, mel alia sale at. No pro ferri apeirian urbanitas, eos an unum detracto periculis, eos illum referrentur consequuntur at.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td>Dicta summo</td>
  </tr>
  <tr>
    <td>Dicta summo signiferumque cu pri</td>
    <td> Lorem ipsum dolor sit amet, persius convenire hendrerit nec at, impedit feugait pertinax mei ex. Ne erant reformidans sed. Blandit forensibus ex est, has repudiandae instructior eu, ut qui dicant accusamus ullamcorper. Qui an cetero placerat phaedrum, mel alia sale at. No pro ferri apeirian urbanitas, eos an unum detracto periculis, eos illum referrentur consequuntur at.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td> Cu cum viris latine dignissim, ius populo legendos ad.</td>
    <td>Dicta summo</td>
  </tr>
</table>

以上是我的HTML。

我对 CSS 和 HTML 还是很陌生，所以我有点困惑。如果我想把我的大部分文本放在我的第二列中，我如何使那一列特别宽？目前，当我运行这段代码时，它使第二列在垂直方向上很长，看起来不太好。

我正在寻找类似于我在这里创建的这个 codepen 沙箱的东西：https ://codepen.io/melonandthecoconut/pen/NWvqbKo 。图片在这里：https ://i.imgur.com/VuH0Jsl.png 。

标签： htmlcss

解决方案

<td>如果需要，您可以为表格中的每个设置宽度。但在这种特殊情况下，如果您只需要使第二个<td>更宽，我们可以使用 CSS:nth-child()伪类来实现。

table tr td:nth-child(2) {
   width: 40%;
   // just change this matches to your requirement.
}

使用时要记住:nth-child的是我们应该在元素上使用它，而不是父元素

否则，您可以使用 style 属性简单地设置元素的 width 属性，如下所示。

<td style="width: 40%">

更新 工作示例

推荐阅读