使用CSS的HTML表格列樣式-有解無憂

我有以下 HTML 表，我需要在最后一列中使用不同的樣式：
使用 CSS 的 HTML 表格列樣式

uj5u.com熱心網友回復：

如果您特別需要定位最后一列，則可以使用它。您還需要洗掉表格邊框，因為它將被繪制在個人th或td邊框上。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

thead {
  border: 2px;
}

th.th {
  border: solid;
}

tr th:last-child,
tr td:last-child {
  border: 1px dashed #000;
  border-right: 0;
}

<table>
  <thead>
    <tr>
      <th class="th">h1</th>
      <th class="th">h2</th>
      <th class="th">h3</th>
    </tr>
  </thead>
  <tr>
    <td>r1c1</td>
    <td>r1c2</td>
    <td>r1c3</td>
  </tr>
  <tr>
    <td>r2c1</td>
    <td>r2c2</td>
    <td>r2c3</td>
  </tr>
</table>

uj5u.com熱心網友回復：

您可以使用:last-child偽類選擇器。這是有效的，因為td最后一個表列的 s 是它們的最后一個子元素tr。

我還必須洗掉表格的邊框。

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

table {
  border-collapse: collapse;
  border-right: 0px;
  /* border: 1px solid; */
}

td {
  border: 1px solid;
}

thead {
  border: 2px;
}

th.th {
  border: solid;
}

th.th3 {
  font-weight: normal;
}

td:last-child, th:last-child {
   border: 1px dashed;
   border-right: none;
}

<table>
  <thead>
    <tr>
      <th class="th">h1</th>
      <th class="th">h2</th>
      <th class="th3">h3</th>
    </tr>
  </thead>
  <tr>
    <td>r1c1</td>
    <td>r1c2</td>
    <td>r1c3</td>
  </tr>
  <tr>
    <td>r2c1</td>
    <td>r2c2</td>
    <td>r2c3</td>
  </tr>
</table>

uj5u.com熱心網友回復：

使用 a 的另一種方法<table>是部署CSS Grid。

作業示例：

.my-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 300px;
  height: 180px;
  font-size: 24px;
  gap: 1px;
}

.my-table-cell {
  text-align: center;
  line-height: 60px;
  outline: 1px solid rgb(0, 0, 0);
}

/* FIRST TWO CELLS */
.my-table-cell:nth-of-type(-n   2) {
  font-weight: 900;
  border: 1px solid rgb(0, 0, 0);
}

/* THIRD CELL */
.my-table-cell:nth-of-type(3) {
  border-top: 1px dashed rgb(0, 0, 0);
}

/* CELLS ON THE RIGHT */
.my-table-cell:nth-of-type(3n) {
  border-bottom: 1px dashed rgb(0, 0, 0);
  outline: none;
}

<div class="my-table">
  <div class="my-table-cell">h1</div>
  <div class="my-table-cell">h2</div>
  <div class="my-table-cell">h3</div>
  
  <div class="my-table-cell">r1c1</div>
  <div class="my-table-cell">r1c2</div>
  <div class="my-table-cell">r1c3</div>
  
  <div class="my-table-cell">r2c1</div>
  <div class="my-table-cell">r2c2</div>
  <div class="my-table-cell">r2c3</div>
</div>

延伸閱讀：

https://cssgridgarden.com/
https://css-tricks.com/snippets/css/complete-guide-grid/

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478197.html

標籤：html css

上一篇：“.subtitle{}”和“h2[class=subtitle]”有什么區別？

下一篇：在引導程式中調整影像大小