PHP/HTML - Table width

Question

I am doing a webpage using HTML and PHP. Below, I attach a picture of my problem.

enter image description here

My first problem is that I cannot give the format I want to the table:

I'd like to adjust to the content columns 1, 2, 3 and 4.
Column 5 (last column) should have the more space the better.
The aaaaaaaaaaaaaaaa of the last column should not go beyond the table. It should be split up or with a line break when reach the column end.

Here a piece of my code:

echo "<table><tr>";
echo '<td width="40">ID</th>';
echo '<td width="50">Organism</th>';
echo '<td width="50">Chromosome</th>';
echo '<td width="50">Gene name</th>';
echo '<td>Sequence</th>';
echo "</tr>";
while($row = mysqli_fetch_array($result2)) { 
    echo "<tr>";
    echo "<td>$row[id_send]</td>";
    echo "<td>$row[organism]</td>";
    echo "<td>$row[chromosome]</td>";
    echo "<td>$row[gene]<br></td>";
    echo "<td>$row[sequence]</td>";
    echo "</tr>";
}
echo "</table>";

If your users are actually entering data like that, what the heck data are you storing? Most people use the space key. It will break on a space. — Jessica
– Jessica, Commented Dec 13, 2013 at 21:40
YeeeeHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Hmmm, looks like SO has a similar problem... — j08691
– j08691, Commented Dec 13, 2013 at 21:41
It is a test, but it will be like that. "aaaaaaaaaa" is a representation of a DNA sequence "GGGCCCCTTTAAAAGGAGAGAGATGGTTTG" — user2886545
– user2886545, Commented Dec 13, 2013 at 21:44
Use wordwrap() in php or word-wrap: normal | break-word in css — Sean
– Sean, Commented Dec 13, 2013 at 21:45

Poornima · Accepted Answer · 2013-12-13 21:46:00Z

1

You can use this css for the table.

.wrapText
{
     table-layout:fixed;
     width: 100%;
     word-wrap: break-word;
}

However "break-word" will break the words and wrap them into the next line, it could make the text unreadable.

answered Dec 13, 2013 at 21:46

Poornima

9385 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amarjit singh · Accepted Answer · 2013-12-13 21:57:28Z

.table {
    margin-bottom: 30px;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.tableHeading {
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    color: #000000;
    padding: 5px;
    background: url('/images/table-2-head-bg.gif');
    background-repeat: repeat-x;
    background-color: #f7f7f7;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableSubHeading {
    padding: 5px;
    color: #666666;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableMassActionCell {
    padding-top: 10px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f7f7f7;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableColumnHeader {
    font-weight: bold;
    font-size: 12px;
    background-color: #EEEEEE;
    padding: 5px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowNoResults {
    font-weight: bold;
    background-color: #ffccff;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowLeft1 {
    font-weight: bold;
    background-color: #f7f7f7;
    padding: 5px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowRight1 {
    padding: 5px;
    background-color: #f7f7f7;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowLeft2 {
    font-weight: bold;
    background-color: #ffffff;
    padding: 5px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowRight2 {
    padding: 5px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableSubmitCell {
    background-color: #EEEEEE;
    padding: 5px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    text-align: right;
}

Collectives™ on Stack Overflow

PHP/HTML - Table width

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related