Semantic-UI 表格列宽变化

Semantic-UI 提供了一种简单而强大的方法来调整表格列的宽度。通过使用内置的 UI 类，开发者可以快速轻松地设置表格列宽，并根据需要进行调整。

设置表格列宽

要设置表格列的宽度，可以使用 width 属性。可以将此属性设置为列所需的任何宽度，例如像素或百分比等。

代码示例

<table class="ui celled table">
  <thead>
    <tr>
      <th style="width: 40%;">Name</th>
      <th style="width: 30%;">Gender</th>
      <th style="width: 30%;">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Female</td>
      <td>25</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Male</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jessica</td>
      <td>Female</td>
      <td>27</td>
    </tr>
  </tbody>
</table>

在此示例中，我们将 width 属性设置为每个列的值。这将使第一列宽度占据整个表格宽度的 40％，第二列和第三列将分别占据 30％ 的宽度。这将使列的宽度保持静态，不会随着屏幕宽度的变化而自动调整大小。

调整表格列宽

有时可能需要动态调整表格列宽。这可以通过 Semantic-UI 提供的一些类来实现。

collapsing 类

collapsing 类用于将表格列大小设置为适应其内容。例如，如果一列中的所有单元格都只包含短文本，则可以使用 collapsing 类使该列大小缩小为其内容所需的最小值。

<table class="ui celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th class="collapsing">Gender</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Female</td>
      <td>25</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Male</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jessica</td>
      <td>Female</td>
      <td>27</td>
    </tr>
  </tbody>
</table>

在此示例中，我们使用 collapsing 类将第二列大小调整为其内容所需的最小值。这将使列的宽度随着其内容而动态调整大小，以便所有单元格都适合其所需的最小宽度。

single line 和 two lines 类

single line 类和 two lines 类用于将表格中每个单元格的文本自动换行。这些类对于包含较长文本段落的列非常有用，这些文本段落可能需要适合列的高度。

<table class="ui celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th class="single line">Biography</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Female</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae neque bibendum, tempus velit ac, faucibus tellus. Nullam imperdiet odio vitae pellentesque feugiat.</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Male</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae neque bibendum, tempus velit ac, faucibus tellus. Nullam imperdiet odio vitae pellentesque feugiat.</td>
    </tr>
    <tr>
      <td>Jessica</td>
      <td>Female</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae neque bibendum, tempus velit ac, faucibus tellus. Nullam imperdiet odio vitae pellentesque feugiat.</td>
    </tr>
  </tbody>
</table>

在此示例中，我们使用 single line 类将第三列大小调整为适应每个单元格中的文本段落。这将使每个单元格中的文本自动换行，以便适合列的高度。

结论

通过使用 Semantic-UI 提供的这些类和属性，开发者可以轻松快捷地调整和管理表格列的大小和宽度。无论您是需要静态列宽还是动态列宽，都可以使用 Semantic-UI 让表格的设计更加优雅、可读和洁净。