使HTML表格展開以容納沒有包裝的內容

樣品結構：（CSS /樣式爲清楚起見移除）

<table> 
     <tbody> 
     <tr> 
      <td>Row ID</td> 
      <td><div>Some content</div><div>Another</div>...and so on 
     </tr> 
     </tbody> 
    </table>

每行中的每個第二表格單元格內的是含有文本的行的DIV。在呈現表格的時刻，DIV元素流向表格的邊緣，然後在不適合時進行換行。

我需要的是這些DIV元素保持在屏幕上的一行中。我可以通過手動將表格寬度設置爲一個很大的值來模擬，例如400％，但這通常太寬。我需要一種方法來使表擴展爲包含最寬的行，但不會更大。使用white-space: nowrap只包裝每個DIV中的文本。

有沒有辦法用CSS做到這一點？

來源

2016-05-23 Robin Elvin

篩選https://jsfiddle.net/Lg0wyt9u/887/添加display: inline-block？ –

我不明白你在問什麼。如果你只想把div放在一行中，你可以使用display：inline;關於桌子擴大到最寬的一排，但沒有更大。這不是默認行爲嗎？ –

@NenadVracar完美。你想發佈你的小提琴作爲答案嗎？ –

您可以在div和white-space: nowrap上td

table { 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
    white-space: nowrap; 
 
} 
 
div { 
 
    display: inline-block; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Row ID</td> 
 
     <td> 
 
     <div>Some content</div> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, magnam!</div> 
 
     <div>Another</div> 
 
     <div>Another</div> 
 
     <div>Another</div> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-05-23 09:47:14

謝謝！我還必須添加空格：正常的div以使其呈現像以前一樣。 –

使HTML表格展開以容納沒有包裝的內容

回答

相關問題