html - 如何通过 CSS 旋转这些文本？

Question

.sakktabla {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 20px;
}

.sakktabla th {
  padding: .5em;
  text-align: center;
}

.sakktabla td {
  border: 1px solid;
  width: 2em;
  height: 2em;
  text-align: center;
}

.sakktabla .vilagos {
  display: table-cell;
  background: #ede4df;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #180f0a;
}

.sakktabla .sotet {
  display: table-cell;
  background: #180f0a;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #ede4df;
}

.sakktabla .barna1 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna2 {
  background: #41210a;
  width: 54px;
  height: 54px;
  max-height: 60px;
  max-width: 60px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-bottom: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
  transform: rotate(180deg)
}

.sakktabla .barna3 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna4 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-right: 8px solid #ae845e;
}

.sakktabla .barna5 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

.sakktabla .barna6 {
  background: #41210a;
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

<table class="sakktabla">
  <tr>
    <th class="barna1"></th>
    <th class="barna2">H</th>
    <th class="barna2">G</th>
    <th class="barna2">F</th>
    <th class="barna2">E</th>
    <th class="barna2">D</th>
    <th class="barna2">C</th>
    <th class="barna2">B</th>
    <th class="barna2">A</th>
    <th class="barna3"></th>
  </tr>
  <tr>
    <th class="barna4">8</th>
    <th class="sotet">&#9820</th>
    <th class="vilagos">&#9822</th>
    <th class="sotet">&#9821</th>
    <th class="vilagos">&#9819</th>
    <th class="sotet">&#9818</th>
    <th class="vilagos">&#9821</th>
    <th class="sotet">&#9822</th>
    <th class="vilagos">&#9820</th>
    <th class="barna4">1</th>
  </tr>
  <tr>
    <th class="barna4">7</th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="barna4">2</th>
  </tr>
  <tr>
    <th class="barna4">6</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">3</th>
  </tr>
  <tr>
    <th class="barna4">5</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">4</th>
  </tr>
  <tr>
    <th class="barna4">4</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">5</th>
  </tr>
  <tr>
    <th class="barna4">3</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">6</th>
  </tr>
  <tr>
    <th class="barna4">2</th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="barna4">7</th>
  </tr>
  <tr>
    <th class="barna4">1</th>
    <th class="vilagos">&#9814</th>
    <th class="sotet">&#9816</th>
    <th class="vilagos">&#9815</th>
    <th class="sotet">&#9813</th>
    <th class="vilagos">&#9812</th>
    <th class="sotet">&#9815</th>
    <th class="vilagos">&#9816</th>
    <th class="sotet">&#9814</th>
    <th class="barna4">8</th>
  </tr>
  <tr>
    <th class="barna5"></th>
    <th class="barna2">A</th>
    <th class="barna2">B</th>
    <th class="barna2">C</th>
    <th class="barna2">D</th>
    <th class="barna2" h>E</th>
    <th class="barna2">F</th>
    <th class="barna2">G</th>
    <th class="barna2">H</th>
    <th class="barna6"></th>
  </tr>

我想旋转顶行字母（只需忽略底部的 atm），但是当我这样做时，边框会变得混乱。这封信可以在课堂上找到.barna2
也想确保浏览器支持是正确的，所以我真的想使用不受支持的东西。

请忽略我的错误，这是我在大学的第一年。

标签： htmlcss

Answer 1

编辑：

.sakktabla {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 20px;
}

.sakktabla th {
  padding: .5em;
  text-align: center;
}

.sakktabla td {
  border: 1px solid;
  width: 2em;
  height: 2em;
  text-align: center;
}

.sakktabla .vilagos {
  display: table-cell;
  background: #ede4df;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #180f0a;
}

.sakktabla .sotet {
  display: table-cell;
  background: #180f0a;
  width: 60px;
  height: 60px;
  font-size: 30px;
  max-width: 60px;
  max-height: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-text-stroke: 1px #ede4df;
}

.sakktabla .barna1 {
  width: 54px;
  height: 54px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna2 {
  width: 54px;
  height: 54px;
  max-height: 60px;
  max-width: 60px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-bottom: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
  transform: rotate(180deg)
}

.sakktabla .barna3 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-top: 8px solid #ae845e;
}

.sakktabla .barna4 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-right: 8px solid #ae845e;
}

.sakktabla .barna5 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-left: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

.sakktabla .barna6 {
  width: 54px;
  height: 54px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2e6d8;
  border-right: 8px solid #ae845e;
  border-bottom: 8px solid #ae845e;
}

.sakktabla tr{
  background: #41210a;
}

.sakktabla tr:nth-child(10) .barna2 {
  transform: rotate(0deg)
}

<table class="sakktabla">
  <tr>
    <th class="barna1"></th>
    <th class="barna2">H</th>
    <th class="barna2">G</th>
    <th class="barna2">F</th>
    <th class="barna2">E</th>
    <th class="barna2">D</th>
    <th class="barna2">C</th>
    <th class="barna2">B</th>
    <th class="barna2">A</th>
    <th class="barna3"></th>
  </tr>
  <tr>
    <th class="barna4">8</th>
    <th class="sotet">&#9820</th>
    <th class="vilagos">&#9822</th>
    <th class="sotet">&#9821</th>
    <th class="vilagos">&#9819</th>
    <th class="sotet">&#9818</th>
    <th class="vilagos">&#9821</th>
    <th class="sotet">&#9822</th>
    <th class="vilagos">&#9820</th>
    <th class="barna4">1</th>
  </tr>
  <tr>
    <th class="barna4">7</th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="vilagos">♟&lt;/th>
    <th class="sotet">♟&lt;/th>
    <th class="barna4">2</th>
  </tr>
  <tr>
    <th class="barna4">6</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">3</th>
  </tr>
  <tr>
    <th class="barna4">5</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">4</th>
  </tr>
  <tr>
    <th class="barna4">4</th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="barna4">5</th>
  </tr>
  <tr>
    <th class="barna4">3</th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="vilagos"></th>
    <th class="sotet"></th>
    <th class="barna4">6</th>
  </tr>
  <tr>
    <th class="barna4">2</th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="sotet">♙&lt;/th>
    <th class="vilagos">♙&lt;/th>
    <th class="barna4">7</th>
  </tr>
  <tr>
    <th class="barna4">1</th>
    <th class="vilagos">&#9814</th>
    <th class="sotet">&#9816</th>
    <th class="vilagos">&#9815</th>
    <th class="sotet">&#9813</th>
    <th class="vilagos">&#9812</th>
    <th class="sotet">&#9815</th>
    <th class="vilagos">&#9816</th>
    <th class="sotet">&#9814</th>
    <th class="barna4">8</th>
  </tr>
  <tr>
    <th class="barna5"></th>
    <th class="barna2">A</th>
    <th class="barna2">B</th>
    <th class="barna2">C</th>
    <th class="barna2">D</th>
    <th class="barna2" h>E</th>
    <th class="barna2">F</th>
    <th class="barna2">G</th>
    <th class="barna2">H</th>
    <th class="barna6"></th>
  </tr>