以下工作符合要求(几乎全部)。一个问题是表中的某些行将有多个“标志”(在本例中,数据类型为“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>