HTML CSS如何停止擴展表格單元格

我有一個表格，其內容來自返回的數據集。我想要做的就是停止「描述」單元格擴展超過280像素寬，無論內容長度（其字符串）如何。我曾嘗試過：HTML CSS如何停止擴展表格單元格

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >

但是，這似乎並不奏效。我不希望它包裹，也不希望顯示超過280像素的任何內容。

來源

2009-08-05 flavour404

看起來你的HTML語法對錶單元格不正確。在嘗試下面的其他想法之前，請確認這是否有效......您也可以嘗試將其添加到您的表本身：table-layout：fixed ..。

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;"> 
    [content] 
</td>

新的HTML

<td> 
    <div class="MyClass""> 
     [content] 
    </div> 
</td>

CSS類：

.MyClass{ 
    height: 280px; 
    width: 456px; 
    overflow: hidden; 
    white-space: nowrap; 
}

來源

2009-08-05 22:47:00 RSolberg

<table border="1" width="183" style='table-layout:fixed'> 
    <col width="67"> 
    <col width="75"> 
    <col width="41"> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
    <tr> 
    <td>Row 1</td> 
    <td>Text</td> 
    <td align="right">1</td> 
    </tr> 
    <tr> 
    <td>Row 2</td> 
    <td>Abcdefg</td> 
    <td align="right">123</td> 
    </tr> 
    <tr> 
    <td>Row 3</td> 
    <td>Abcdefghijklmnop</td> 
    <td align="right">123456</td> 
    </tr> 
</table>

我知道這是老同學，但給一個嘗試，它的作品。

可能還需要補充一點：

<style> 
    td {overflow:hidden;} 
</style>

當然，你把它放進一個單獨的鏈接的樣式表，而不是內聯......不會吧;）

來源

2009-08-05 22:47:11

+10

「表格的佈局：固定」在表本身的樣式，僅僅是爲我工作的事情。 – 2012-03-15 22:35:01

你可以除非將其內容包裝在容器控件（如div）內，否則不會控制表格單元格的寬度（td）。以下jQuery函數會將每個td的內容包裝在div中。

function WrapTableCellsWithDiv(tableId) 
{ 
    $('#' + tableId + ' tbody tr td').each(function() 
    { 
     //get corresponding th of this td 
     var tdIndex = $(this).index(); 
     var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')'); 
     var thWidth = $(th).width(); 

     //wrap the contents of td inside a div 
     var tdContents = $(this).html(); 
     var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>'; 
     $(this).html(divTag); 
    }); 
}

這個函數將緊裹div標記內每個td元素的內容。 div標籤的寬度將被設置爲相應的th元素的寬度。

樣本表結構：

<table id="SampleTable"> 
    <thead> 
     <tr> 
      <th style="width: 90px;">FirstName</th> 
      <th style="width: 90px;">LastName</th> 
      <th style="width: 60px;">Age</th> 
      <th style="width: 70px;">Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>Smith</td> 
      <td>25</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Ted</td> 
      <td>Eddie</td> 
      <td>22</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Angel</td> 
      <td>Mike</td> 
      <td>23</td> 
      <td>Female</td> 
     </tr> 
    </tbody> 
</table>

來源

2011-05-06 12:49:46

您可以將td的顯示設置爲阻止，然後您可以控制其寬度。 – Simon 2018-02-06 07:10:59

沒有使用Javascript，CSS只。工作正常！

.no-break-out { 
     /* These are technically the same, but use both */ 
     overflow-wrap: break-word; 
     word-wrap: break-word; 

     -ms-word-break: break-all; 
     /* This is the dangerous one in WebKit, as it breaks things wherever */ 
     word-break: break-all; 
     /* Instead use this non-standard one: */ 
     word-break: break-word; 

     /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
     -ms-hyphens: auto; 
     -moz-hyphens: auto; 
     -webkit-hyphens: auto; 
     hyphens: auto; 

    }

來源

2016-02-02 22:59:44

請提供您的代碼的一些解釋，以幫助其他用戶的網站。 – Tristan 2016-02-02 23:21:41

這可能是有用的，因爲上面的答案就是CSS：

td { 
    word-wrap: break-word; 
}

來源

2017-05-09 01:37:51

HTML CSS如何停止擴展表格單元格

回答

相關問題