When converting Dataframe to HTML is it possible to set column maximum width

Question

I'm not very good in HTML.. so maybe there is an easy fix to this by using classes... But haven't found any example on the net...

I want to set my table column a maximum width.. It the text cell is bigger than the cell, than word breaks is performed.

I have found an example on what I need:

<table border="1" class="dataframe table table-bordered table-striped table-hover fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="140px" />
    <col width="40px" />
    <col width="40px" />
  <thead>
    <tr>
      <th>Group</th>
      <th>Start Address (decimal)</th>
      <th>Length (decimal)</th>
      <th>Register</th>
      <th>Bits</th>
    </tr>
  </thead>
</table>

The and so on, does exactly what I want..

But I don't know how I can get the same kind of behaviour using the panda.to_html function...

Any hint?

Thanks

Answer 1

Check out the pandas documentation for to_html.

There is an option to define column spacing in a list, with the width of each column as an element in the list:

df.to_html(col_space=[20,30,140,40,40])

---

EDIT: Looking more into this, I'm not sure how to set the maximum column width you are looking for but came up with a hack workaround by inserting col width by replacing text in the generated html:

.replace('<thead>','<col width="20px" />\n<col width="30px" />\n<col width="140px" />\n<col width="40px" />\n<col width="40px" />\n<thead>')

Full example:

df = pd.DataFrame({'Group':['Short Text','Longer Text','Really Really Long Text'],
                'Start Address (decimal)':['Short Text','Longer Text','Really Really Long Text'],
                'Length (decimal)':['Short Text','Longer Text','Really Really Long Text'],
                'Register':['Short Text','Longer Text','Really Really Long Text'],
                'Bits':['Short Text','Longer Text','Really Really Long Text']})

html = df.to_html(classes=['table-bordered','table-striped','table-hover fixed'],
                index=False) \
            .replace('<thead>','<col width="20px" />\n<col width="30px" />\n<col width="140px" />\n<col width="40px" />\n<col width="40px" />\n<thead>')

Output

<table border="1" class="dataframe table-bordered table-striped table-hover fixed">
  <col width="20px" />
<col width="30px" />
<col width="140px" />
<col width="40px" />
<col width="40px" />
<thead>
    <tr style="text-align: right;">
      <th>Group</th>
      <th>Start Address (decimal)</th>
      <th>Length (decimal)</th>
      <th>Register</th>
      <th>Bits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Short Text</td>
      <td>Short Text</td>
      <td>Short Text</td>
      <td>Short Text</td>
      <td>Short Text</td>
    </tr>
    <tr>
      <td>Longer Text</td>
      <td>Longer Text</td>
      <td>Longer Text</td>
      <td>Longer Text</td>
      <td>Longer Text</td>
    </tr>
    <tr>
      <td>Really Really Long Text</td>
      <td>Really Really Long Text</td>
      <td>Really Really Long Text</td>
      <td>Really Really Long Text</td>
      <td>Really Really Long Text</td>
    </tr>
  </tbody>
</table>

While not ideal, it should generate html close to the end result you posted in your question.