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