Encapsulation des tables Bootstrap : présentation élégante des données des colonnes liées

Question

Il semble que la largeur de la colonne ne puisse pas être spécifiée lorsque les données dans la cellule du tableau sont un lien. Comment puis-je faire en sorte que ce lien soit renvoyé et respecter la largeur de colonne que je fournis ?

<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

Vous pouvez ajouter word-wrap: break-word;来使文本换行，然后使用max-width

dans le style

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