如何垂直对齐多个表列

时间：2015-09-13 22:34:41

标签： html css html-table

我有多个具有以下结构的表：

<table>
    <tr>
        <td colspan="4">year</td>
    </tr>
    <tr>
        <td colspan="2">semester</td>
        <td colspan="2">semester</td>
    </tr>
    <tr>
        <td>course type</td>
        <td>course</td>
        <td>course type</td>
        <td>course</td>
    </tr>
</table>

因为表格的内容不一样，所以单元格不会垂直排列，而且看起来很难看。

/* set-up */
* {
    box-sizing: border-box;
}
 body {
    background: gainsboro;
}
#container {
    width: 752px;
    box-shadow: 0 0 5px silver;
    min-height: 200px;
    background: white;
    padding: 20px;
    font-family: Arial;
    font-size: 15px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, .7);
}
table:last-child {
    margin-bottom: 0;
}
tr.thead td, td.thead {
    font-weight: bold;
    background: rgba(0, 0, 0, .05);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
tr.thead2 td, td.thead2 {
    font-weight: bold;
    background: rgba(0, 0, 0, .1);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
table td {
    border: 1px solid rgb(200, 200, 200);
    padding: 4px;
}
<div id="container">
    <table>
        <tr class="thead">
            <td colspan="4">Third-year (2015-2016)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Becerilerinin Öğretimi I</td>
            <td>A</td>
            <td>Çocuklara Yabancı Dil Öğretimi I</td>
        </tr>
    </table>
    <table>
        <tr class="thead">
            <td colspan="4">Second-year (2014-2015)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dilbilim I</td>
            <td>A</td>
            <td>Dilbilim II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Edinimi</td>
            <td>A</td>
            <td>İngilizce Öğretiminde Yaklaşımlar I</td>
        </tr>
    </table>
    <table>
        <tr class="thead">
            <td colspan="4">First-year (2013-2014)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi I</td>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>İleri Okuma ve Yazma I</td>
            <td>A</td>
            <td>İleri Okuma ve Yazma II</td>
        </tr>
    </table>
</div>

如果我给单元格一个固定的宽度，我得到所需的result (Fiddle)。

/* course-type cells */
tr:nth-child(n+2) td:nth-child(odd) {
    width: 50px;
}
/* course cells */
tr:nth-child(n+2) td:nth-child(even) {
    width: 306px;
}

但这只有在我手动输入宽度时才有效。我希望课程类型单元格为50px，课程单元格为剩余空间。 306px不是固定值。如果容器的宽度发生变化，306px将无效，因为表的宽度设置为100%。所以我考虑使用calc函数：

/* course cells */
tr:nth-child(n+2) td:nth-child(even) {
    /* (container-width(752) - (course-type-cell*2) - (container-padding*2)) / 2 */
    width: calc((100% - (50px * 2) - (20px * 2)) / 2); /* 306px */
}

但它不起作用。我认为calc没有得到正确的100%值，或根本没有得到它。我想确保所有父元素都继承容器的宽度，以便calc可以工作

table, tbody, tr {
    width: 100%;
}

但它没有work。使用固定宽度我唯一的选择，还是有办法让calc工作？

2 个答案:

答案 0 :(得分：2)

您可以使用此

table-layout: fixed;

https://css-tricks.com/fixing-tables-long-strings/

答案 1 :(得分：0)

您可以使用一个具有不可见间隔行的表，而不是使用单独的表，以使每个部分看起来像一个单独的表。这样，当浏览器计算布局时，它将表现为一个表，但最终结果将看起来像三个表。

一般的想法是你把它全部放在一个表中，在每个部分之间你会有一个看起来像这样的间隔行：

<tr class="spacer"><td colspan="4">&nbsp;</td></tr>

spacer行具有以下CSS样式，使其不可见：

tr.spacer td {
    border: none;
}

以下是最终结果的屏幕截图：

Final result

这是代码的现场演示：

＆＃13;
＆＃13; 
/* set-up */
* {
    box-sizing: border-box;
}
 body {
    background: gainsboro;
}
#container {
    width: 752px;
    box-shadow: 0 0 5px silver;
    min-height: 200px;
    background: white;
    padding: 20px;
    font-family: Arial;
    font-size: 15px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, .7);
}
table:last-child {
    margin-bottom: 0;
}
tr.thead td, td.thead {
    font-weight: bold;
    background: rgba(0, 0, 0, .05);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
tr.thead2 td, td.thead2 {
    font-weight: bold;
    background: rgba(0, 0, 0, .1);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
table td {
    border: 1px solid rgb(200, 200, 200);
    padding: 4px;
}

tr.spacer td {
    border: none;
}
＆＃13; 
<div id="container">
    <table>
        <tr class="thead">
            <td colspan="4">Third-year (2015-2016)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Becerilerinin Öğretimi I</td>
            <td>A</td>
            <td>Çocuklara Yabancı Dil Öğretimi I</td>
        </tr>
        <tr class="spacer"><td colspan="4">&nbsp;</td></tr>
        <tr class="thead">
            <td colspan="4">Second-year (2014-2015)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dilbilim I</td>
            <td>A</td>
            <td>Dilbilim II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Edinimi</td>
            <td>A</td>
            <td>İngilizce Öğretiminde Yaklaşımlar I</td>
        </tr>
        <tr class="spacer"><td colspan="4">&nbsp;</td></tr>
        <tr class="thead">
            <td colspan="4">First-year (2013-2014)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi I</td>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>İleri Okuma ve Yazma I</td>
            <td>A</td>
            <td>İleri Okuma ve Yazma II</td>
        </tr>
    </table>
</div>
＆＃13;
＆＃13;
＆＃13;

JSFiddle版本：https://jsfiddle.net/bmyhqevw/

相关问题
最新问题