Feel a bit of a fool here. I want the the 1st <td> to span(approx) 70-80% of the table, with the 2nd and 3rd <td> splitting the remaining space between them.
I thought that setting the <th> colspan to 6, and then giving the first <td> a colspan of 4 will allow me to set accomplish this, but it seems to take up half of the table, and then the last 2 <td> are different widths. Any idea how to solve this?
HTML
<table class="table table-record no-margin-bottom">
<thead>
<tr>
<th colspan="6" class="table-tab-active--grey font-weight-bold text-md-center">Tasks</th>
</tr>
</thead>
<tbody>
<tr class="bg--lighter-grey txt--darker-blue" ">
<td colspan="4">Lorem Ipsum</td>
<td colspan="1" class="text-uppercase font-weight-bold">Lorem</td>
<td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--orange btn-block">Lorem Ipsum</button></td>
</tr>
<tr class="bg--lighter-grey txt--darker-blue" ">
<td colspan="4">Lorem Ipsum</td>
<td colspan="1" class="text-uppercase font-weight-bold">Lorem</td>
<td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--lighter-grey btn-block">Button</button></td>
</tr>
</tbody>
</table>
Set a % width on the table, and then set each td to have a specified width. You can use something like
.table td:nth-child(0) {width: 70% }
.table td:nth-child(1) { width:15% }
Or, set % width explicitly in <td> tag.
That's not what colspans are for.
You can't use a colspan to increase the width of a column; they're meant to tell the table that a cell should take up multiple columns.
So if there are 6 columns to a table, then using a colspan of 4 will cause a cell to take up 4 columns; and if each column is the same width, then that cell will be 4 times as wide as the other cells, yes.
table {border:1px outset #777; table-layout:fixed}
td {border:1px inset #777; width:16.66%}
<table>
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>six</td>
</tr>
<tr>
<td colspan="4">one to four</td><td>five</td><td>six</td>
</tr>
</table>
But in order for that to work, the columns must have widths already.
So, you won't escape from setting the widths. And if you have to do that anyway, there is no need, in your case, to use colspan as well. Only widths.
table {border:1px outset #777; table-layout:fixed}
td {border:1px inset #777; width:16.66%}
td:first-child {width:66.66%}
<table>
<tr>
<td>one</td><td>two</td><td>three</td>
</tr>
</table>
You may need to study the table-layout property though; it keeps the widths of cells as you set it. Without it, tables may sometimes ignore the specified widths in order to display everything.
Related
I'm trying to figure out why the 2 rows are so far apart, since there is no additional height on the inner tables. Inspecting the height in Chrome shows that the topmost TD has 50px, while the table underneath is 24px.
Why is this the case?
<table width="540px" height="94px" style="background-color: #fafbfc;">
<tbody>
<tr>
<td style="padding:0 0 0 55px;vertical-align:middle;">
<table style="border-collapse:separate;">
<tbody>
<tr>
<td>
<span style="display:block;padding:0px 15px;">First field</span>
</td>
<td>
<span style="text-decoration:none;display:block;padding:0px 15px;">Second field</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:0 55px 0 55px; vertical-align:middle;">
another
</td>
</tr>
</tbody>
</table>
This is due to cellpadding and cellspacing.
According to this geeksforgeeks article
Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of the cell.
Cellspacing specifies the space between cells (i.e) it defines the whitespace between the edges of the adjacent cells.
If you want both td to have same height, then provide cellpadding="0" cellspacing="0" attributes to both outer and inner table tags.
The answer is ultimately the width and height attributes you have added.
If you wish to have these, they should go within the style attribute
I have taken out most of the styling just for ease of the snippet.
I would also recommend making use of the thead and <th> elements. As they relate sole to headings in tables. https://www.w3schools.com/tags/tag_th.asp
<table style="background-color: #fafbfc;">
<thead>
<tr>
<th>
<span style="display:block;padding:0px 15px;">First field</span>
</th>
<th>
<span style="text-decoration:none;display:block;padding:0px 15px;">Second field</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:0 55px 0 55px; vertical-align:middle;">
1st column data
</td>
<td style="padding:0 55px 0 55px; vertical-align:middle;">
More data
</td>
</tr>
</tbody>
</table>
Nesting a table inside another table is not a good idea, that is why you have an unexpected result. When there's table nested inside another table, you may start to get unwanted styles. This is because parent table styles will also affect the child table. For example, if you add height on the parent table, it will affect the child table too.
<table>
...
<table>
....
</table>
</table>
I have a for loop that should populate a table as in following diagram:
Age is is in the first row which is a table header, then there are three rows and each has three columns. First row contains images, second is simply a horizontal line (must not be a row, could be bottom border of previous row), and the third is numeric scale i.e. 18-29, 30-50, 50+.
My HTML:
<table >
<tr>
<td>Age</td>
</tr>
<tr *ngFor="let age of age_range">
<td>{{age}}</td>
</tr>
</table>
and css:
table , tr {
border-bottom: 1px solid;
}
How can I apply css to it to look like in the diagram? Right now I get like following:
it should work like this
<table >
<tr>
<td colspan="3">Age</td>
</tr>
<tr>
<td *ngFor="let age of age_range">{{age}}</td>
</tr>
If you don't know the the exact columns number you can use age_range.length, in Angularjs it's done like this colspan="{{age_range.length}}" ,it's probably the same in Angular 2.
.border-bottom {border-bottom: 1px #ccc solid;}
table {width: 100%;}
<table>
<tr>
<td colspan="3">Age</td>
</tr>
<tr>
<td class="border-bottom">11111</td>
<td class="border-bottom">22222</td>
<td class="border-bottom">33333</td>
</tr>
</table>
Please see below html:
<table style="width: 700px;table-layout: fixed ; margin-top: 30px;" cellpadding="0" cellspacing="0">
<tr class="tableHeader">
<td width="220px">Event Name</td>
<td width="120px">City</td>
<td width="77px">Date</td>
<td width="110px">Price</td>
<td width="80px">Status</td>
<td width="60px">Select</td>
</tr>
</table>
<div style="overflow: auto;height: 360px; width: 730px;">
<table style='width: 700px;table-layout: fixed;' cellpadding='0' cellspacing='0'>
<tr >
<td colspan='6' >adnanpo </td>
</tr>
<tr >
<td width='220px' >adnanpo </td>
<td width='120px' > </td>
<td width='77px' >04/20/2012 </td>
<td width='110px' >USD $30.00 </td>
<td width='80px' >Paid </td>
<td width='60px' >
<input class='orgOkButton' type='button' id='btnOpenOrder' name='btnOpenOrder' onclick='return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')</td>
</tr>
</table>
</div>
Below part is casuing the issue:
<tr >
<td colspan='6' >adnanpo </td>
</tr>
Please sse the image, the column width is disturbed!! Please help me to fix it!
The obvious solution is to remove the tr element that causes the problem. It does not seem to have a function here. If you just want some spacer there, put a div element between the two tables.
The problem arises because table-layout: fixed tells the browser to decide on column widths according to the first row, if widths have not been set in certain other ways. Here the first row has just one cell that spans all columns, and then the defined behavior is to divide the width evenly between the columns.
Alternatively, set the column widths explicitly, e.g. using
<col width=220>
<col width=120>
etc. right after each <table> tag. But make sure that the sums of the widths add up to the number you set as the total width of the table (they currently don’t). When col elements are used that way to set all column widths, browsers will use those exact widths without questioning (which may cause problems, but I presume you have considered them).
Remove 'table-layout' property in your second table and it will work fine. And close you input element (onclick="return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')"/>)
If I understand correctly, you are worried to the fact that your columns are not aligning to the top.
Let me first suggest that you use the below CSS:
table { empty-cells: show; }
This will allow the empty cell you have to fill in the space. (otherwise you can just put an in it's blank space).
Also, I suggest you use one continuous table if you can.
Close your input-tag - the > is missing. If the problem is still there we can look further.
Yes this will be the case by using colspan in the "first row" of a table. To get around this you could do something like this (again just for the first row - you can use colspan fine further down):
<tr>
<td width="220px"><div style="position:absolute;width:220px;">adnanpo</div></td>
<td width="120px"></td>
<td width="77px"></td>
<td width="110px"></td>
<td width="80px"></td>
<td width="60px"></td>
</tr>
I have a HTML table consisting of 3 columns. It has a fixed width of 600px.
<table>
<tr>
<td>Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and the Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.
Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?
You can apply width="99%" on that column. For example:
<table>
<tr>
<td width="99%">Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
you can use max-width:99%; on the first column and give fixed sizes on the other columns (I used pixels sized columns).
<table style="width: 100%;">
<tr>
<td style="max-width: 99%">
Will max
</td>
<td style='width:110px;'>
fixed size here
</td>
</tr>
</table>
For every column you want to be the minimum width: (1) set the CSS width to zero and (2) use white-space: nowrap to prevent the text from wrapping onto multiple lines.
table {
width: 100%;
}
:where(th, td):not(.max) {
width: 0;
white-space: nowrap;
}
/* For demo purposes */
table, th, td {
border: 1px solid gray;
}
<table>
<tr>
<th class="max">Name</th>
<th>Qty</th>
<th>Actions</th>
</tr>
<tr>
<td class="max">Victoria Adelaide Mary Louisa</td>
<td>233,546,443</td>
<td>Abort Retry Fail</td>
</tr>
</table>
I have a table, with some rows and columns, here is the example of the second row
<tr>
<td valign="top" style="width: 150px;">
<h5>MyCity</h5>
</td>
<td valign="top" style="width: 360px;">
<h5 class="store_title">Store Title</h5>
<p>address</p>
</td>
<td class="storeDescriptionCell"><div>Description
</div>
</td>
</tr>
I added storeDescriptionCell in my css
td.storeDescriptionCell{
padding:20px;
}
I even tried using the div, but everytime I add margin or padding to cell or div, MyCity, Store Title goes down with the Description. I just want the description to lay lower.
You could use the following CSS to set all <td> cells to vertical align top and the store description to vertical align bottom:
table td {
vertical-align: top;
}
table td.storeDescriptionCell {
vertical-align: bottom;
}
This is how html tables work. If you want one cell to be lower than the rest in a row you might want to try using a rowspan.
Can you provide an image of what you want and what you get.
Looking at the content that you want in your table why not use a th for the headings of the columns.
<table>
<tr>
<th>My City</th>
<th>Store Name</th>
<th> </th>
</tr>
<tr>
<td>content</td>
<td>$content</td>
<td>$content</td>
</tr>
</table>