文本不適合表格 - HTML

經過許多解決方案後，它們都不能解決我的問題。文本不適合表格 - HTML

我有一個<td>其中有一個<table>。但是，此內部表格中的文本不適合。文本剪輯出來。我嘗試了overflow:hidden,table-layout: fixed,<table>和word-wrap:break-word,<td>等各種東西，但仍未解決問題。

這裏是我的代碼：

<table id="table1"> 
<tr> 
    <td id="td1"> 
     <img src="http://lorempixel.com/165/232" /> 
    </td> 
    <td id="td2">Long text goes here</td> 
    <td id="td3" rowspan="7"> 
     <table id="table2"> 
      <tr> 
       <td>Long text goes here</td> 
      </tr> 
     </table> 
    </td> 
</tr>

而這裏的CSS：

#table1 { 
    width: 765px; 
    border: 1px solid red; 
    border-spacing: 0; 
    padding: 0; 
} 
#td1 { 
    width: 175px; 
    vertical-align: top; 
} 
#td2 { 
    vertical-align: top; 
} 
#td3 { 
    width: 180px; 
    vertical-align: top; 
    background-color: #F3F3F3; 
} 
#table2 { 
    width: 100%; 
    border: 1px solid blue; 
    border-spacing: 0; 
    padding: 8px; 
}

內表剪輯出裏面的內容。任何人都可以請提供一個解決方案，以便內表可以有適當的內容，而不需要剪裁。

JSFiddle

來源

2014-07-07 user3778084

儘量避免內聯CSS;這不是爲HTML定義樣式的正確方法。改爲使用單獨的樣式表。 –

你給一個ID'＃table2'給表;但在CSS中，你已經給了'#table 2'這樣的空間。確保ID名稱中沒有空格。 –

它對我來說似乎很好。 – qtgye

這可以更簡單地實現。我們用display: table;和display: table-cell;來做到這一點。我們可以將具有類似行爲的塊元素佈局到表格中，但要簡單得多並且易於維護。

Read more on CSS display

Have a Fiddle!

CSS

.box { 
    border: solid 1px #CCC; 
    display: table; 
    padding: 10px; 
} 
.box div { 
    display: table-cell; 
    vertical-align: top; 
    margin: 10px; 
    padding: 10px; 
} 
.right { 
    border: solid 1px #F00; 
}

HTML

<div class="box"> 
    <div class="left"> 
     <img src="http://placehold.it/200" /> 
    </div> 
    <div class="center">Content</div> 
    <div class="right">Content</div> 
</div>

來源

2014-07-07 10:50:38 misterManSam

文本不適合表格 - HTML

回答

相關問題