2017-02-22 92 views
0

我想在html中製作一個具有多行和一列的表格。除了一列外,所有行都會有一列。我知道這可以用colspan來完成。但我不想爲每一行都寫一個colspan。是否有捷徑可尋?我是否必須爲每一行使用colspan只爲一行?

例子:

<table> 
    <tr> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
     <td>Some text</td> 
    </tr> 
</table> 

結構:

[   Some Text   ] 
[   Some Text   ] 
[   Some Text   ] 
[Some  Text][Some  Text] 
[   Some Text   ] 
[   Some Text   ] 
+0

我想你不能沒有這個'colspan' – Sankar

回答

0

其他明智不要使用表div的使用

<div style="width:100px"> 
<label style="width:100px"></br> 
<label style="width:100px"></br> 
<label style="width:50px"> 
<label style="width:50px"></br> 
<label style="width:100px"></br> 
</div> 
0

這個怎麼樣?

table tr:nth-of-type(4) { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
table { 
 
    position: relative; 
 
}
<table> 
 
    <tr> 
 
    <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text</td> 
 
    <td>Some text</td> 
 
    </tr> 
 
</table>

+0

我使用表格邊框試過用的jsfiddle。我認爲有一個問題。我必須使用我認爲的colspan – Furkan

0

Puting空 「TD」 裏面的 「TR」 會給一個真正收出看跌:

<table border="0"> 
    <tr> 
     <td></td> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
     <td></td>    
     <td>Some text</td> 
    </tr> 
    </table> 
0

不知道的跨瀏覽器兼容,但在這裏是一個解決方案。

td:only-child{ 
 
    display:block; 
 
    width:100% 
 
} 
 

 
td { 
 
    display:inline-block; 
 
    background:#eee; 
 
    text-align:center; 
 
    width:50%; 
 
    box-sizing: border-box; 
 
}
<table width="250"> 
 
    <tr> 
 
     <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some text</td> 
 
     <td>Some text</td> 
 
    </tr> 
 
</table>

相關問題