css對齊表格行，不使用另一個表格

有沒有任何方法不對齊表格單元格？我想我的頭是有得表所示css對齊表格行，不使用另一個表格

------------- 
| | A | B | | 
------------- 
| | | | 
------------- 
| | | | 
-------------

無論如何要做到這一點，而不之間使用兩個表或採用div代替表？

我試過用小提琴的東西，但它不工作，第一臺是我希望它看起來像，但不使用兩個表 http://jsfiddle.net/nA3DL/

在此先感謝

來源

2014-02-13 ah-shiang han

http://www.w3schools.com/tags/att_td_colspan.asp –

請問colspan真的解決了嗎？我想不是。 – witherwind

colspan應該解決它，但這意味着我必須給每個單元格一個跨度，問題是我有很多已經創建的表，所以我不想打擾那些......最好只使用css，但不知道是否可以完成 –

您可以設置在頭部的相對位置，並將其移動到左邊：

table.test th{ 
    width:100px; 
    position: relative; 
    left: -50px; 
} 
table.test th.half{ 
    visibility: hidden; 
}

fiddle

來源

2014-02-13 18:21:26 vals

非常感謝！這實際上工作！廢話......如果它早一點...現在我已經改變了一半...但仍然非常感謝這！ –

幸福，它幫助。下次嘗試更快:-) – vals

你可以使用未排序的列表，但我不確定你要在表格中顯示多少數據。可能需要很多工作，但是如果只有你的表頭會有不同的外觀，這可能是要做到這一點：

CSS：

.table { 
    width: 500px; 
} 

.table ul { 
    list-style: none; 
    display: table; 
    width: 100%; 
    text-align: center; 
    margin: 0; 
} 

.table ul li { 
    display: table-cell; 
    border: 1px solid black; 
} 

.table ul li.small { 
    width: 50px; 
} 

.table ul li.big { 
    width: 20%; 
}

HTML：

<div class="table"> 
    <ul> 
     <li class="small"></li> 
     <li>Header</li> 
     <li>Header</li> 
     <li>Header</li> 
     <li>Header</li> 
     <li class="small"></li> 
    </ul> 
    <ul> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
     <li class="big">Data</li> 
    </ul> 
</div>

這裏有一個小提琴：http://jsfiddle.net/3dpnX/2/

來源

2014-02-13 02:50:26

感謝分享這個，但它不完全是我要找的東西，但從它的聲音，我可能根本沒有任何選擇...無論是colspan還是這個，看起來像一張桌子不能做到這一點 –

你可以用CSS添加列跨距，在這種情況下，你不必在每個td上編寫列跨度。如果這就是你想要避免的。如果你害怕它可能會影響你所有的其他表格，那麼你可以給這個表格添加一個類別，並且只有這個表格會受到影響 –

對不起，我的錯誤是，CSS中的column-span屬性做了一件其他的事情比html中的colspan：/ –

css對齊表格行，不使用另一個表格

回答

相關問題