I have HTML table. I want to auto set the width of table columns , which changes as per the content. For example in below image you can see ID column content has to come in a single line, but even though width is set to auto , its not working here. Am i missing out on something?
Please find my code below:
CSS:
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
width: auto !important;
overflow: hidden;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
html table:
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Company Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
#foreach (Models.UTP utpResult in lstUtpResult.utp)
{
<tr>
<td>
<input value="1" id="type_radio_1" name="type_radio" type="radio" />
</td>
<td>#utpResult.id</td>
<td>#utpResult.companyName</td>
<td>#utpResult.address.street.Line1,
#utpResult.address.city,
#utpResult.address.zip.code,
#utpResult.address.country.name
</td>
</tr>
}
</tbody>
</table>
ID Text should fit into to a single line but its not.
Try using white-space: nowrap; for the id field
p.a {
white-space: nowrap;
}
<h2>white-space: nowrap:</h2>
<p class="a">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
You can try using whitespace: nowrap for your td, th style, if it just overflows out of it's container even with auto sizing you can try width: fit-content.
Related
Here's the Output screenshot
I'm struggling to vertically align text with an image within the same HTML cell that they share. I'm sharing a simpler version of the test html file I created, but in the past I've tried everything from CSS and nested tables but somehow couldn't get it to work. Appreciate the help.
CSS:
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 25%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
Html:
<table>
<tbody>
<tr>
<th>Col-1</th>
<th>Col-2</th>
</tr>
<tr>
<td><img src="Star.png" style="width:60px"> Static Text</td>
<td>Static Text</td>
</tr>
</tbody>
</table>
It's very simple. Use vertical-align: middle; on the image. It will push the text to the center as well.
Example
Also if I were you I wouldn't use inline CSS. It can give problems in future, use instead an external CSS file
My problem is that I can't find a way to fix the table row height,
if the username exceeded it overlaps to the other column.
check the last two row
and it's also scrollable at side and the username is still in their position.
code for single row:
<tr>
<td class="headcol">
<div class="innerHead">
<div class="user-id" style="display:none;">18993</div>
<input type="checkbox" class="checkboxes" name="user_select[]">
TestingalksdjaskldjsalkdjalskdjaksduqwoieuoqweuowqeiTesting#gmail.com </div>
</td>
<td class="forcedWidthUserCode">Tested091237871</td>
<td class="textAlignCenter">Field staff</td>
<td class="forcedWidth">Testing</td>
<td class="forcedWidth">Tested</td>
<td> N/A </td>
<td class="textAlignCenter">Active</td>
<td> N/A </td>
<td class="forcedWidth"> N/A </td>
<td> N/A </td>
<!--<td>N/A</td>-->
</tr>
CSS:
.headcol {
position: absolute;
width: 18em;
border-right: 2px solid #fff;
background-color: #fff;
z-index: 0;
}
table tr td {
/* background: #fff; */
padding: 6px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #ddd;
}
how can I align and wrap the text base on the width of the username column?
It happens because there is a white space between those nodes (the checkbox and the text node). The line breaks at white space.
There are two way to handle this.
As mentioned by #Supraja Ganji: Use word-break.
table tr td {
word-break: break-all;
}
or prevent the whole line from breaking, and hide anything that overflows:
table tr td {
white-space: nowrap;
overflow: hidden;
}
Your username is too long and doesnot contain any space, so it is not wrapping.
for td give word-break: break-all
table tr td {
/* background: #fff; */
padding: 6px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #ddd;
word-break: break-all;
}
Using a div inside td is a very bad idea.
Using a div instide a td is not worse than any other way of using tables for layout. (Some people never use tables for layout though, and I happen to be one of them.)
If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized. The default for a div is to determine its width from its parent, and the default for a table cell is to determine its size depending on the size of its content.
The rules for how a div should be sized is well defined in the standards, but the rules for how a td should be sized is not as well defined, so different browsers use slightly different algorithms.
Let me know if you require any further help
.headcol {
position: relative;
width: 18em;
border-right: 2px solid #fff;
background-color: #fff;
z-index: 0;
}
.innerHead {
word-break: break-all;
overflow: hidden;
}
<table>
<tbody><tr>
<td class="headcol">
<div class="innerHead">
<div class="user-id" style="display:none;">18993</div>
<input type="checkbox" class="checkboxes" name="user_select[]">
TestingalksdjaskldjsalkdjalskdjaksduqwoieuoqweuowqeiTesting#gmail.com </div>
</td>
<td class="forcedWidthUserCode">Tested091237871</td>
<td class="textAlignCenter">Field staff</td>
<td class="forcedWidth">Testing</td>
<td class="forcedWidth">Tested</td>
<td> N/A </td>
<td class="textAlignCenter">Active</td>
<td> N/A </td>
<td class="forcedWidth"> N/A </td>
<td> N/A </td>
<!--<td>N/A</td>-->
</tr>
</tbody></table>
I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one.
In the code below I try to achieve that the last column, that contains the string 'aaaaaabbb...' becomes scrollable. So that when it's overfilled it starts a new line and shows a scrollbar. So I would like to see this for the last row:
Desired result:
aaaaaaaa
bbbbbbbc
cccccccc
HTML-code:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow:scroll;
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>
Thank you for your help.
Two things:
You have a missing ">" at the end of your closing </td>.
You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td>
The solution you are looking for is word-wrap: break-word; This will allow the content to wrap.
I have modified your snippet:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow: auto; /* changed this */
word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>
Like others have mentioned, in order to get the long-one-word text to wrap - you need to add: word-wrap: break-word; to the td
However, achieving a vertical scroll on a table cell is problematic because by definition table cells expand to fit all the content.
You could work around this by setting display:block on that table cell. (like this)
But it's probably better to wrap the text within a span tag so as not to mess with the display of table elements:
Like so:
FIDDLE
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width: 100px;
height: 200px;
max-width: 100px;
min-width: 100px;
}
.td_size span {
overflow: auto;
display: block;
max-height: 200px;
word-wrap: break-word;
}
<h2>Ticket details</h2>
<table>
<tr>
<th>Requester</th>
<td>^User^</td>
</tr>
<tr>
<th>Submitted by</th>
<td>®User®</td>
</tr>
<tr>
<th>Service</th>
<td>#GLOBAL END USER WORKPLACE#</td>
</tr>
<tr>
<th>CI</th>
<td>+N/A+</td>
</tr>
<tr>
<th>Source</th>
<td>#Event#</td>
</tr>
<tr>
<th>Category</th>
<td>&Request Fulfillment&</td>
</tr>
<tr>
<th>Impact</th>
<td>!None - No Degradation of Service!</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Assignment</th>
</tr>
<tr>
<th>Group</th>
<td>]Team]</td>
</tr>
<tr>
<th>Staff</th>
<td>[User[</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Description</th>
</tr>
<tr>
<td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
</td>
</tr>
</table>
First, make that last column span over 2, ie colspan=2 but as for the css part you can use overflow-x and overflow-y to determine the scrolling parts
Try it
you may use word-wrap: break-word; or <br> tag where you want to break the word
Hello all I'm just trying to have my border around my table cell right around the text...not stretched the length of the entire table. Its the section with the border around it
CSS:
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
}
HTML:
<table class="content_table">
<br/><br/>
<h1>Planned Vs Actual Productions Drilldown</h1>
<tr>
<td class="results">
Number of results returned: ${fn:length(beans)}
</td>
</tr>
give the text a simple span or any other block element like div p ... span with inline-block is also a block element which can have a border.
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
.border {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
display: inline-block;
}
Any Element inside a table needs to be in TD so that is is valid html... put another tr > td into your table like this
<table class="content_table">
<tr>
<td>
<h1>Planned Vs Actual Productions Drilldown</h1>
</td>
</tr>
<tr>
<td class="results">
<span class="border">Number of results returned: ${fn:length(beans)}</span>
</td>
</tr>
</table>
The answer lies in the fact that you have table width as 100%. Without any of styling at the TD level, the TD is automatically going to take the most width it can.
The bigger question though, is why you are using a table at all. This is a single column of data, no need for a table here, just use div's.
I had a similar problem with a WordPress theme. The "collapse" wasn't entirely working on the first column, because my theme's style.css "reset" had set the table width to 100%. At least for me, the "auto" width solved the problem.
<style>
table#donations { border-collapse: collapse; width:auto; }
</style>
<table id="donations">
<tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>
So I have this code here:
<table>
<tr>
<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td width="1000px" valign="top">Content</td>
</tr>
</table>
with the CSS
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?
It should be:
<td width="200">
or
<td style="width: 200px">
Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.
EDIT
As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.
<table style="table-layout:fixed;">
This will force the styled width <td>. If the text overfills it, it will overlap the other <td> text. So try using media queries.
Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:
<table>
<tr>
<td valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td valign="top" class="content">Content</td>
</tr>
</table>
CSS
.content {
width: 1000px;
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
This problem is quite easily solved using min-width and max-width within a css rule.
HTML
<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>
CSS
.name {
max-width: 80px;
min-width: 80px;
}
This will force the first column to be 80px wide. Usually I only use max-width without min-width to reign in text that is very occasionally too long from creating a table that has a super wide column that is mostly empty. The OP's question was about setting to a fixed width though, hence both rules together. On many browsers width:80px; in CSS is ignored for table columns. Setting the width within the HTML does work, but is not the way you should do things.
I would recommend using min and max width rules, and not set them the same but rather set a range. This way the table can do it's thing, but you can give it some hints on what to do with overly long content.
If I want to keep the text from wrapping and increasing the height of a row - but still make it possible for a user to see the full text, I use white-space: nowrap; on the main rule, then apply a hover rule that removes the width and nowrap rules so that the user can see the full content when they over their mouse over it.
Something like this:
CSS
.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}
It just depends on exactly what you are trying to achieve. I hope this helps someone.
PS As an aside, for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome
You can't specify units in width/height attributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.
You can try the "table-layout: fixed;" to your table
table-layout: fixed;
width: 150px;
150px or your desired width.
Reference:
https://css-tricks.com/fixing-tables-long-strings/
You can use within <td> tag css : display:inline-block
Like: <td style="display:inline-block">
try this:
word-break: break-all;
try to use
word-wrap: break-word;
hope this help
I use
<td nowrap="nowrap">
to prevent wrap
Reference: https://www.w3schools.com/tags/att_td_nowrap.asp
Note that adjusting the width of a column in the thead will affect the whole table
<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe#email.com</td>
</tr>
</table>
In my case, the width on the thead > tr was overriding the width on table > tr > td directly.
I tried with many solutions but it didn't work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property
This was my HTML requirement
<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
My CSS
table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}
If you don't set the table to have table-layout: fixed and a certain width, then the table cells will stretch beyond their own width if content is wider. That's what he/she was complaining about.
Use
<table style="table-layout:fixed;">
It will force table to set to 100% width.Then use this code
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(table id is dataTable and having 3 column)
to specify length to each cell