No name No name - 2 months ago 6x
CSS Question

How to put the table inside the box

I am doing a website just for learning purposes of css of other templates, and i am doing a table with 8 atributes.

I need some guidance on how can I put the table inside the box, without it going out of the borders. I tried to put overflow, but i think i am doing it wrong.
The template is from the internet.

Thanks in advance

I think i just have to do something in tablesorter, but am not sure what

#este .tablesorter {
width: inherit;
margin: -5px 0 0 0;

#este .tablesorter td{
margin: 0;
padding: 0;
border-bottom: 1px dotted #ccc;

#este .tablesorter thead tr {
height: 34px;
background: url(../images/table_sorter_header.png) repeat-x;
text-align: left;
text-indent: 10px;
cursor: pointer;

#este .tablesorter input[type=image] {
margin-right: 10px;

#este table.tablesorter thead tr .headerSortDown,
#este table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;

the code is here:


Your table headers <th> are simply to long. You have 3 options:

  1. Use scrolling in x direction:

    .module_content {
        overflow-x: auto;
  2. Use max-width on table cells with break-word:

    th {
        max-width: 30px;
        word-wrap: break-word;
  3. Make table header cells content smaller