CSS表格怎么剧终_CSS表格样式优化与内容居中显示教程

border-collapse

text-align

vertical-align

border-collapse

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 设置表格宽度 */
}

th, td {
  border: 1px solid black; /* 设置单元格边框 */
  padding: 8px; /* 设置内边距，增加可读性 */
}

border-style

border-width

border-color

border-style: double;

border-spacing

border-collapse: separate;

vertical-align

td {
  vertical-align: middle; /* 垂直居中 */
}

vertical-align

top

bottom

vertical-align

display: block;

<div class="table-container">
  <table>
    ...
  </table>
</div>

.table-container {
  overflow-x: auto;
}

@media screen and (max-width: 600px) {
  table {
    display: block;
  }

  thead {
    display: none; /* 隐藏表头 */
  }

  tr {
    display: block;
    margin-bottom: 10px; /* 设置行间距 */
  }

  td {
    display: block;
    text-align: right; /* 设置文本对齐方式 */
    border-bottom: 1px solid #ddd; /* 添加底边框 */
    position: relative;
    padding-left: 50%; /* 预留空间显示表头内容 */
  }

  td:before {
    position: absolute;
    left: 6px;
    top: 6px;
    content: attr(data-label); /* 显示表头内容 */
    font-weight: bold;
    text-transform: uppercase;
  }
}

data-label

nth-child

tr:nth-child(even) {
  background-color: #f2f2f2; /* 设置偶数行的背景颜色 */
}

nth-child

odd

tr:nth-child(3n)

td {
  word-wrap: break-word; /* 允许单词内断句 */
  /* word-break: break-all;  强制断句，即使在单词中间 */
}

td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<td>
  <span title="This is a very long text that will be displayed in a tooltip.">
    This is a very long text...
  </span>
</td>