首頁  >  問答  >  主體

包裝Bootstrap表格:連結列資料的優雅展示

當表格儲存格中的資料是連結時,似乎無法指定列寬。我如何使這個連結換行並遵守我提供的列寬?

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

P粉486138196P粉486138196425 天前524

全部回覆(1)我來回復

  • P粉037880905

    P粉0378809052023-09-14 14:42:48

    您可以在樣式中加入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>

    回覆
    0
  • 取消回覆