Как добавить средства форматирования html-элементов в заголовки столбцов с помощью метода to_html для их поворота?

Question

Я использую Pandas DataFrame и хочу показать его на html-странице, показывая как можно меньше пустого пространства.Я также использую Bootstrap 4

. Я могу добавить средства форматирования ко всем элементам столбца с помощью метода to_html и стилей таблиц:

html = df.to_html(
    formatters={'COL_NAME': lambda x: '<b>' + x + '</b>'},
    classes='table table-striped df_data',
    escape=False
)

ИЯ могу добавить html-элементы, а также напрямую заменить значения

html = html.replace('<th>', '<th><div><span>')
html = html.replace('</th>', '</span></div></th>')

• Есть ли чистый способ добавить эти html-элементы в заголовки?

• Я делаю всеэтого, чтобы показать повернутые заголовки и сохранить место на экране, как на картинке.Я взял стили CSS с этой страницы

  

  .df_data thead th {
      height: 140px;
      white-space: nowrap;
  }
  
  .df_data thead th > div {
      transform: translate(25px, 51px) rotate(315deg);
      width: 30px;
  }
  
  .df_data thead th > div > span {
      border-bottom: 1px solid #ccc;
      padding: 5px 10px;
  }
  

  Но результат далек от ожидаемого.Пространство не сохранено, а заголовки не выровнены.Что мне нужно сделать, чтобы обезопасить свободное место в колонках?Мне нужно будет забыть о стилях Bootstrap

• Есть ли прямой способ добиться этого?

Любая рекомендация будет оценена по достоинству

Обновление 2019-26-02

Решение @joshmoto - хороший подход, но мне нужно адаптировать столбцы ширины, потому что я заранее не знаю содержимого ячейки (максимум 10 символов)

Answer 1

Чтобы получить этот желаемый эффект, когда ширина ячейки является переменной, вам нужно добавить еще один div и позицию, которая будет position: relative; в ячейке заголовка таблицы.Отсюда вы можете position: absolute; следующий дочерний элемент div left: 100%;, который даст вам правильную точку отсчета.Затем вы можете продолжить использовать код, который вы указали в демонстрационном коде.

См. Рабочий код codeply здесь https://www.codeply.com/go/RuEciHdXo3

MAIN {
  padding-top: 30px;
  padding-bottom: 30px
}

.df_data {
  border-collapse: collapse
}

.df_data thead th {
  border-top: none;
  padding: 0
}

.df_data td {
  text-align: center;
  padding: 10px 5px;
  border: 1px solid #ccc
}

.df_data th.rotate {
  margin-left: 100%;
  height: 140px;
  white-space: nowrap
}

.df_data th.rotate>div {
  position: relative;
  width: 100%;
  height: 30px
}

.df_data th.rotate>div>div {
  position: absolute;
  left: 100%;
  width: 30px;
  transform: translate(-14px, -2px) rotate(315deg)
}

.df_data th.rotate>div>div>span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px
}

.df_data th.row-header {
  padding: 0 10px;
  border-bottom: 1px solid #ccc
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<main role="main" class="container">
  <table class="table table-striped df_data">
    <thead>
      <tr>
        <th></th>
        <th class="rotate">
          <div>
            <div><span>Column header 1</span></div>
          </div>
        </th>
        <th class="rotate">
          <div>
            <div><span>Column header 2</span></div>
          </div>
        </th>
        <th class="rotate">
          <div>
            <div><span>Column header 3</span></div>
          </div>
        </th>
        <th class="rotate">
          <div>
            <div><span>Column header 4</span></div>
          </div>
        </th>
        <th class="rotate">
          <div>
            <div><span>Column header 5</span></div>
          </div>
        </th>
        <th class="rotate">
          <div>
            <div><span>Column header 6</span></div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="row-header">Row header 1</th>
        <td>2w98</td>
        <td>3423423</td>
        <td>35325233542947742747344</td>
        <td>12213&gt;</td>
        <td>453842589389582</td>
        <td>49849</td>
      </tr>
    </tbody>
  </table>
</main>