我如何将td组合在一起?

时间:2018-04-16 15:07:06

标签: html css

以下工作符合要求(几乎全部)。一个问题是表中的某些行将有多个“标志”(在本例中,数据类型为“string”和单词“REQUIRED”。在这种情况下,样式会中断,因为第一个标志占用了完整的180px区域。有关如何确保两个标志都适合180px以及它们是否正确对齐的任何建议?

/* place your custom CSS overrides here */

.toc-wrapper .logo {
    max-width: 80%;
    margin: 10%;
}

.content > aside p {
    display: inline;
}

/***** PROPERTIES/ATTRIBUTES TABLE *****/

table.properties {
    display: block;
    margin: 18px 0;
    width: 50%;
}

table.properties thead {
    display: none;
}

table.properties tbody {
    display: block;
    width: 100%;
}

table.properties tr {
    display: list-item;
    padding: 17px 0;
    list-style: none outside none;
}

table.properties tr {
    border-bottom: 1px solid #eceeef;
}

table.properties tr:first-child {
    border-top: 1px solid #dde1e3;
}

table.properties tr:last-child {
    border-bottom: 1px solid #dde1e3;
}

table.properties tr:nth-child(even) > td,
table.properties tr:nth-child(odd) > td {
    background: transparent;
}

table.properties td {
    line-height: 21px; /* must be half tr min-height */
    display: block;
    padding: 0;
    float: left;

    /* MIDDLE TDs */
    font-size: 12px;
    font-weight: 400;
    font: normal normal 400 normal 12px inherit;
    color: rgb(147, 157, 163);
}

table.properties td:first-child {
    /* FIRST TD */
    font-size: 13px;
    font-weight: 500;
    color: rgb(41, 46, 49);
}

table.properties td:nth-child(3) {
    /* THIRD TD */
    font-size: 10px;
    font-weight: 700;
    color: #f2a359;
}

table.properties tr > td:last-child {
    /* LAST TD */
    font-size: 13px;
    font-weight: 500;
    color: rgb(76, 85, 90);

    /* OVERRIDES */
    float: none; /* float: left due to td settings (FOR ALL EXCEPT LAST CHILD) */
}

/* COLUMN VIEW */
/*@media screen and (min-width: 1200px) {*/
    .content > h1,
    .content > h2,
    .content > h3,
    .content > h4,
    .content > h5,
    .content > h6,
    .content > p,
    .content > table,
    .content > ul,
    .content > ol,
    .content > aside,
    .content > dl {
        padding-left: 40px;
        padding-right: 40px;
    }

    .content > ul,
    .content > ol,
    .content > dl {
        padding-left: 55px;
        padding-right: 40px;
    }

    table.properties tr {
        clear: both;
        min-height: 42px; /* must be twice td line-height */
    }

    table.properties td {
        text-align: right;
        float: left;
    }

    table.properties tr > td:nth-child(1) {
        width: 180px;
    }
    table.properties tr > td:nth-child(2) {
        clear: left;
        width: 180px;
    }

    table.properties tr > td:nth-child(3) {
    }

    table.properties tr > td:last-child {
        margin-left: 200px;

        /* OVERRIDES */
        width: auto; /* width: 180px due to td settings (FOR ALL EXCEPT LAST CHILD) */
        text-align: left; /* text-align: right due to td settings (FOR ALL EXCEPT LAST CHILD) */
        clear: none; /* clear: left due to td settings (FOR ALL EXCEPT LAST CHILD) */
    }
/*}*/

/* STACKED VIEW */
/*@media screen and (max-width: 1199px) {
    .content > h1,
    .content > h2,
    .content > h3,
    .content > h4,
    .content > h5,
    .content > h6,
    .content > p,
    .content > table,
    .content > aside {
        padding-left: 20px;
        padding-right: 20px;
    }

    .content > ul,
    .content > ol,
    .content > dl {
        padding-left: 35px;
        padding-right: 20px;
    }

    table.properties td {
        padding-left: 4px;
    }

    table.properties td:nth-child(3) {
        padding-left: 0;
        clear: left;
    }

    table.properties td:first-child,
    table.properties td:last-child {
        padding-left: 0;
    }

    table.properties tr > td:last-child {
        padding-top: 10px;

        clear: both;
    }
}
*/
<table class="properties">
<thead>
<tr>
<th>Property</th>
<th>Data Type</th>
<th>Flags</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>send_id</td>
<td>string</td>
<td>REQUIRED</td>
<td>The unique identifier of the send</td>
</tr>
<tr>
<td>send_id</td>
<td>string</td>
<td></td>
<td>The unique identifier of the send</td>
</tr>
<tr>
<td>send_id</td>
<td>string</td>
<td></td>
<td>The unique identifier of the send</td>
</tr>
</tbody>
</table>

0 个答案:

没有答案