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>
Related
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.
i just started learning in HTML.
I'm having a problem in cell padding and spacing...
the one that i created have a cell padding and spacing on all row... is it possible to have a cell spacing and padding in the 1st row but not in the 2nd row?
`
</td>
<tr>
<td width="250" height="500">
</td>
<td width="750">
</td>
</tr>
<tr>
<td colspan="2" height="75">
</td>
</tr>
`
You can simply add padding to each TD not TR
But spacing between cells only for the whole TABLE
The Attribute padding is the response about cell padding
<table border="1" style="border-spacing:2px;">
<tr>
<td width="250" height="500" style="padding:5px;">One</td>
<td width="750" style="padding:5px;">Two</td>
</tr>
<tr>
<td colspan="2" height="75">Three</td>
</tr>
</table>
I would suggest to wrap the content you want to edit in a and add css properties like for example:
Take a look at this div and style combination, it gets kinda useful sometimes. You can make the particular elements special even when they are in a table with constant style.
You can even add this style attribute to the / tags themselves. Maybe what you're looking for.
HTML markup:
<table class='cardc'>
<tr>
<td rowspan='5' width='10%'>
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
<td width='70%' colspan='3'>"
."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font>
</td>
<td>
".$record->fields->Email."
</td>
</tr>
<tr>
<td class='greyF' colspan='3'>
".$record->fields->Country_of_Citizenship__c."
</td>
</tr>
<tr>
<td>
<div class='greyF'>year</div>".$record->fields->Fellowship_year__c."
</td>
<td>
<div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c."
</td>
<td>
<div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c."
</td>
</tr>
<tr>
<td colspan='3'>
<div class='greyF'>Education</div>".$record->fields->Education__c."
</td>
</tr>
<tr>
</tr>
</table>
CSS markup:
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
But as the title says, I'm having cross Browser issues, the border that's supposed to cover the whole table gets cut off at the bottom.
Any recommendations for alternative ways to create the border?
Edited HTML taking everybody's worries into consideration. Border still draws improperly.
See a demo here
It's caused by a combination of an invalid rowspan and border collapsing (which is the default when you select "Normalized CSS" in jsFiddle). If you turn that off or provide the correct number of rows then the border draws correctly.
<td rowspan='5' width=10%> indicates that there are at least 4 following rows, since the current cell shall span 5 rows. Since you don't provide any of those rows the <td> will spill out of the table. Drop the rowspan attribute:
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
You have a rowspan="5" on the first td which is breaking the bottom border of the table, probably because it cannot find the remaining 4 rows to merge with. Removing the rowspan fixes the border.
http://jsfiddle.net/Q3e9m/
Try fixing the errors with html in your code, for starters. Your code lacks some quotation marks, and styling attributes in tags are deprecated.
<html>
<head>
<style>
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
</style>
</head>
<body>
<table class='cardc' style="height:100px;">
<tr>
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
Lack of quotation marks and units.you need to specify whether your values are in pixels or ems ....try and use color coding codes, eg #fff or rgb(255 255 255) instead of of saying white.
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 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>