Bootstrap-Tabellen umschließen: elegante Darstellung verknüpfter Spaltendaten
P粉486138196
P粉486138196 2023-09-13 22:24:29
0
1
397

Es scheint, dass die Spaltenbreite nicht angegeben werden kann, wenn es sich bei den Daten in der Tabellenzelle um einen Link handelt. Wie kann ich diesen Link umbrechen und die von mir angegebene Spaltenbreite berücksichtigen?

<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粉486138196
P粉486138196

Antworte allen(1)
P粉037880905

您可以在样式中添加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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!