Membungkus jadual Bootstrap: persembahan elegan data lajur terpaut

Question

Nampaknya lebar lajur tidak dapat ditentukan apabila data dalam sel jadual adalah pautan. Bagaimanakah cara saya membuat balut pautan ini dan menghormati lebar lajur yang saya sediakan?

<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

Anda boleh menambah word-wrap: break-word;来使文本换行，然后使用max-width

dalam gaya

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