What is the technique for applying HTML element formatters to column headers using the to_html method to achieve rotation?

Question

What is the technique for applying HTML element formatters to column headers using the to_html method to achieve rotation?

I am currently working with a Pandas DataFrame and I am looking for a way to display it on an HTML page with minimal empty space. Additionally, I am utilizing Bootstrap 4.

To format all elements of a column, I can use the to_html method along with table styles:

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

Furthermore, I can directly add HTML elements by replacing the values like so:

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

Is there a tidy method to incorporate these HTML elements into the headers?
I am following these steps to display rotated headers and optimize screen usage as shown in the image. I sourced the CSS styles from this page
```
.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;
}
```
However, the outcome is not as expected. The space is not optimized and the headers are misaligned. What adjustments should I make to maximize column space? I am willing to forego Bootstrap styles.
Is there a more direct approach to achieve this?

Any suggestions or recommendations would be greatly appreciated

Update 2019-26-02

The solution provided by @joshmoto seems promising, but I need to adjust column widths as I cannot predict the cell contents in advance (maximum of 10 characters).

css python-3.x pandas dataframe bootstrap-4

Answer 1

Answer №1

For achieving the desired effect when the cell width varies, it is necessary to insert another div and position it with position: relative; within the table header cell. Subsequently, you can set the next child div to position: absolute; and adjust its position using left: 100%;, which will establish the right point of reference. Following this, you can implement the provided code from the codepen demo.

View the codeply working demo here

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>

Answer 2

For achieving the desired effect when the cell width varies, it is necessary to insert another div and position it with position: relative; within the table header cell. Subsequently, you can set the next child div to position: absolute; and adjust its position using left: 100%;, which will establish the right point of reference. Following this, you can implement the provided code from the codepen demo.

View the codeply working demo here

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>

What is the technique for applying HTML element formatters to column headers using the to_html method to achieve rotation?

Update 2019-26-02

Answer №1

Similar questions

What is the process for moving a tap-target button with materialize css?

The labels assigned to buttons will direct users to unique links specifically designated for that button

Modal box fails to refresh content

Move a div to line up with a table row when clicked using jQuery

plotting two data frames on a single graph

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

JQuery .click Event doesn't center elements even with transform-origin adjustment

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Horizontal Alignment of DIV Tags

python asyncio.gather incorporates user input into the final result

Is there a way to confirm if all div elements have a designated background color?

Proceed with the program's execution using the predetermined value if no input is provided

Iterating through the columns in a DataFrame

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

`Unable to find the button using Selenium and perform a click action on it`

The grid images transition at set intervals using jQuery or another JavaScript framework

Guide for creating a scroll-triggered rotation animation using only JavaScript

"Placing the save button on top of a div - a step

CSS Styled Product Index

Tips on introducing a random pattern into a Javascript gaming experience