Я строю стол, который требует небольшого разделения между двумя клетками. Если вы запустите предоставленный фрагмент, вы заметите, что последний ряд внизу, кажется, выпадает из пласта и не соответствует таблице так же, как его братья и сестры. Я не совсем уверен, почему. Извините за длинный пример кода, все это необходимо для повторного решения проблемы.
<table border="1">
<tbody>
<tr>
<th class="wedge" rowspan="34">
<div class="wedge-name-container">
<h3 class="rotate">Vision</h3>
</div>
</th>
<th class="slice color-See Possibility" rowspan="17">
<div class="rotate header">See Possibility</div>
</th>
<th class="pole name color-Reflection" rowspan="4">
<div class="rotate">Reflection</div>
</th>
<th class="pole modifier color-Reflection" rowspan="4">
<div class="rotate">Benefits</div>
</th>
<td class="statement pole-start">I take time to look back on lessons learned</td>
<td class="answer pole-start">3</td>
<td rowspan="4" class="matrix-container">
<div class="avg benefits mid matrix-bars">
<p>4.5</p></div>
</td>
</tr>
<tr>
<td class="statement ">I pause to be curious about new possibilities</td>
<td class="answer ">5</td>
</tr>
<tr>
<td class="statement ">I think things through before I act</td>
<td class="answer ">6</td>
</tr>
<tr>
<td class="statement ">New reflection benefits</td>
<td class="answer ">2</td>
</tr>
<tr>
<th class="pole name color-Change" rowspan="4">
<div class="rotate">Change</div>
</th>
<th class="pole modifier color-Change" rowspan="4">
<div class="rotate">Benefits</div>
</th>
<td class="statement pole-start">I look for ways to improve or make things better</td>
<td class="answer pole-start">3</td>
<td rowspan="4" class="matrix-container">
<div class="avg benefits high matrix-bars">
<p>5</p></div>
</td>
</tr>
<tr>
<td class="statement ">I can easily pivot to meet emerging opportunities</td>
<td class="answer ">3</td>
</tr>
<tr>
<td class="statement ">I put new things in place to keep things fresh and different</td>
<td class="answer ">5</td>
</tr>
<tr>
<td class="statement ">New change benefits</td>
<td class="answer ">6</td>
</tr>
<tr class="spacer" rowspan="1">
<td class="sideborder-none sm"> </td>
</tr>
<tr>
<th class="pole name color-Reflection pole-start" rowspan="4">
<div class="rotate">Reflection</div>
</th>
<th class="pole modifier color-Reflection" rowspan="4">
<div class="rotate">Overuses</div>
</th>
<td class="statement pole-start" style="background: #EBEBEB;">I can overthink plans and possibilities</td>
<td class="answer pole-start" style="background: #EBEBEB;">2</td>
<td class="avg overuses mid" rowspan="4">
4.5</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">I think of great ideas that I don't follow through on</td>
<td class="answer " style="background: #EBEBEB;">1</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">I delay making decisions until things are crystal clear</td>
<td class="answer " style="background: #EBEBEB;">4</td>
</tr>
<tr>
<td class="statement last-item " style="background: #EBEBEB;">New reflection overuses</td>
<td class="answer last-item " style="background: #EBEBEB;">5</td>
</tr>
<tr>
<th class="pole name color-Change pole-start" rowspan="4">
<div class="rotate">Change</div>
</th>
<th class="pole modifier color-Change" rowspan="4">
<div class="rotate">Overuses</div>
</th>
<td class="statement pole-start" style="background: #EBEBEB;">I spend time changing things that don't really need to be changed</td>
<td class="answer pole-start" style="background: #EBEBEB;">2</td>
<td class="avg overuses high" rowspan="4">
5</td>
</tr>
<tr>
<td class="answer " style="background: #EBEBEB;">3</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">I can neglect to appreciate what is working</td>
<td class="answer " style="background: #EBEBEB;">3</td>
</tr>
<tr>
<td class="statement last-item " style="background: #EBEBEB;">New change overuses</td>
<td class="answer last-item " style="background: #EBEBEB;">3</td>
</tr>
<!-- Spacer row -->
<tr class="spacer">
<td class="sideborder-none md"> </td>
<td class="sideborder-none md"> </td>
<td class="sideborder-none md"> </td>
<td class="sideborder-none md"> </td>
<td class="sideborder-none md"> </td>
</tr>
<tr>
<th class="slice color-Provide Inspiration" rowspan="17">
<div class="rotate header">Provide Inspiration</div>
</th>
<th class="pole name color-Challenge" rowspan="4">
<div class="rotate">Challenge</div>
</th>
<th class="pole modifier color-Challenge" rowspan="4">
<div class="rotate">Benefits</div>
</th>
<td class="statement pole-start">I pursue excellence by stretching limits</td>
<td class="answer pole-start">3</td>
<td rowspan="4" class="matrix-container">
<div class="avg benefits mid matrix-bars">
<p>4.5</p></div>
</td>
</tr>
<tr>
<td class="statement ">I challenge people to go where they haven't gone before</td>
<td class="answer ">4</td>
</tr>
<tr>
<td class="statement ">I help people think bigger and look beyond what they can see</td>
<td class="answer ">5</td>
</tr>
<tr>
<td class="statement ">New challenge benefits</td>
<td class="answer ">6</td>
</tr>
<tr>
<th class="pole name color-Exude Competence" rowspan="4">
<div class="rotate">Exude Competence</div>
</th>
<th class="pole modifier color-Exude Competence" rowspan="4">
<div class="rotate">Benefits</div>
</th>
<td class="statement pole-start">I share my knowledge and opinions with assuredness</td>
<td class="answer pole-start">6</td>
<td rowspan="4" class="matrix-container">
<div class="avg benefits mid matrix-bars">
<p>4.75</p></div>
</td>
</tr>
<tr>
<td class="statement ">I demonstrate confidence in my expertise</td>
<td class="answer ">6</td>
</tr>
<tr>
<td class="statement ">I show up strong and capable</td>
<td class="answer ">4</td>
</tr>
<tr>
<td class="statement ">New exude competence benefits</td>
<td class="answer ">3</td>
</tr>
<tr class="spacer" rowspan="1">
<td class="sideborder-none sm"> </td>
</tr>
<tr>
<th class="pole name color-Challenge pole-start" rowspan="4">
<div class="rotate">Challenge</div>
</th>
<th class="pole modifier color-Challenge" rowspan="4">
<div class="rotate">Overuses</div>
</th>
<td class="statement pole-start" style="background: #EBEBEB;">I can push people too far too fast</td>
<td class="answer pole-start" style="background: #EBEBEB;">1</td>
<td class="avg overuses low" rowspan="4">
2.5</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">My drive for excellence can create stress for others</td>
<td class="answer " style="background: #EBEBEB;">2</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">I move on to the next thing without taking time to celebrate</td>
<td class="answer " style="background: #EBEBEB;">4</td>
</tr>
<tr>
<td class="statement last-item " style="background: #EBEBEB;">New challenge overuses</td>
<td class="answer last-item " style="background: #EBEBEB;">3</td>
</tr>
<tr>
<th class="pole name color-Exude Competence pole-start" rowspan="4">
<div class="rotate">Exude Competence</div>
</th>
<th class="pole modifier color-Exude Competence" rowspan="4">
<div class="rotate">Overuses</div>
</th>
<td class="statement pole-start" style="background: #EBEBEB;">I point out what's right without being impeded by other people's feelings</td>
<td class="answer pole-start" style="background: #EBEBEB;">2</td>
<td class="avg overuses low" rowspan="4">
2.25</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">I make sure people are aware of my expertise and opinion</td>
<td class="answer " style="background: #EBEBEB;">3</td>
</tr>
<tr>
<td class="statement " style="background: #EBEBEB;">When I've made up my mind, I give little credence to other's ideas and suggestions</td>
<td class="answer " style="background: #EBEBEB;">2</td>
</tr>
<tr>
<td class="statement last-item " style="background: #EBEBEB;">New exude competence overuses</td>
<td class="answer last-item " style="background: #EBEBEB;">2</td>
</tr>
<!-- Spacer row -->
</tbody>
</table>