CSS To Make Table 100% Of Max-width


Answer :

Like this



demo



css



table{
width:100%;
}


You need to use:



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


Demo



I have a very well working solution for tables of max-width: 100%.
Just use word-break: break-all; for the table cells (except heading cells) to break all long text into several lines:



<!DOCTYPE html>
<html>
<head>
<style>

table {
max-width: 100%;
}
table td {
word-break: break-all;
}

</style>
</head>
<body>

<table border="1">
<tr>
<th><strong>Input</strong></th>
<th><strong>Output</strong></th>
</tr>
<tr>
<td>some text</td>
<td>12b6459fc6b4cabb4b1990be1a78e4dc5fa79c3a0fe9aa9f0386d673cfb762171a4aaa363b8dac4c33e0ad23e4830888</td>
</tr>
</table>

</body>
</html>


This will render like this (when the screen width is limited):





Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable