包装Bootstrap表格：链接列数据的优雅展示

Question

当表格单元格中的数据是链接时，似乎无法指定列宽。我如何使这个链接换行并遵守我提供的列宽？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<table class="table table-fixed table-striped table-hover table-bordered">
<thead>
  <th>1</th>
  <th>2</th>
  <th>3</th>
  <th>4</th>
  <th>5</th>
  <th>6</th>
  <th>7</th>
  <th>8</th>
  <th>9</th>
  <th>10</th>
  <th>11</th>
  <th>12</th>
</thead>
<tbody>
</tbody>
  <tr>
    <td width="50px"><a href="#">12,45,78,65,45,78,21,54,98,87,5,21,64,87,54,21,87,54,54,54,21,54,87,21,54,</a></td>
    <td>1</td>
    <td>2</td>
    <td>43</td>
    <td>6</td>
    <td>dfgh</td>
    <td>dfg</td>
    <td>dfg</td>
    <td>sadf</td>
    <td>fgj</td>
    <td>sdf</td>
    <td>sdf</td>
  </tr>
</table>
</div>

Answer 1

您可以在样式中添加word-wrap: break-word;来使文本换行，然后使用max-width

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <table class="table table-fixed table-striped table-hover table-bordered">
    <thead>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
    </thead>
    <tbody>
    </tbody>
    <tr>
      <td style="word-wrap: break-word; max-width: 50px;"><a href="#">12,45,78,65,45,78,21,54,98,87,5,21,64,87,54,21,87,54,54,54,21,54,87,21,54,</a></td>
      <td>1</td>
      <td>2</td>
      <td>43</td>
      <td>6</td>
      <td>dfgh</td>
      <td>dfg</td>
      <td>dfg</td>
      <td>sadf</td>
      <td>fgj</td>
      <td>sdf</td>
      <td>sdf</td>
    </tr>
  </table>
</div>