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
Post a Comment