No name No name - 3 months ago 17
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: https://jsfiddle.net/3gnhfLLt/

Answer

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

Comments