如何通过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">♟</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">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">♙</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">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>

我想旋转顶部的行字母(只是忽略底部的)，但是当我这样做时，边界变得混乱。这个字母可以在类.barna2
中找到同时要确保浏览器的支持是正确的所以我真的想使用不支持的东西

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

Answer 1

EDIT:

.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">♟</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">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">♙</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">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>

Answer 2

所以当你重新缩放时，你看到的边界只是瓷砖之间的一个奇怪的间隙。您可以做的是为表row()添加背景色，而不是为每个单独的项目添加背景色。这将修复边框。

现在对于字母，你可以选择.sakktabla tr的第一个孩子，并将这个转换回0度。或者将其反转，只对最后一个子元素应用旋转。

将这两个类添加到你的CSS将解决你的问题

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

.sakktabla tr:first-child, .sakktabla tr:last-child {
background-color: #41210a;
}