1

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

Sebastien Berthiaume
  • 11
  • 2

1 Answers1

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.

Danny Malm
  • 11
  • 2