How do i give a border to the <tr>(t_border).
The inner table shouldnt inherit the style from the outer one
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</tbody>
You can try as per my code:
<style>
table{
border-collapse: collapse;
}
table.t_border tr{
border:solid 1px red;
}
</style>
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td><td>B</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Hope it might help you!
you can set separate style for the class .t_border, see example code..
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</table></td></tr></table>
<style>
.t_border
{
border: 1px solid red;
}
</style>
just give style of tr tag
<tr>
<td style="border : 1px solid black">B</td>
</tr>
If you need to style your border, you may use other answers.
But if you only need to use the pure HTML table style, you can use this :
<table border=1> to give border on your table inside table.
You can't add a border to a <tr>. You would have to add it to the <td>s. Also your t_border table isn't be being closed </table> and your outer table should be closed with </table> instead of </tbody>.
Just giving the border to the tr won't really have an effect. It would be better to give the td's a border top or bottom of what you want it to actually show up. For example, border-bottom:2px solid black;
Related
Okay so I don't even know if this is possible, but I'm trying to accomplish the following design with the use of a <table>:
I know it would be easier to just use a <span> and not even bother with tables, but I figured a <table> would actually make sense here.
This is what I have so far:
table {
text-align: left;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You could just set a display:flex on tr and it would do the job. Like so:
tr {
display:flex;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You can reset display values for th and td
table {
text-align: left;
}
th,td {display:inline;}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
I have a table and I want to style spacing for every row in the table. I want the gap after the first row to be small (for example 1px) and 20px after the second row. Margin and padding does not seem to work. I also tried cellspacing = 20 but it sets spacing for every cell and I want to style gaps after the rows. How can I achieve that?
This snippet is what I currently have and what I tried :)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellspacing="20">
<tr style = "margin-bottom: 1px; padding-bottom: 1px">
<th style = "padding-bottom: 1px">Month</th>
<th style = "padding-bottom: 1px">Savings</th>
</tr>
<tr>
<td style = "margin-bottom: 20px">January</td>
<td style = "margin-bottom: 20px">$100</td>
</tr>
<tr style = "border-collapse: separate; border-spacing: 1px">
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
padding is not allowed on table row so you can apply padding to td or you can also add div inside td and give div tag margin bottom.
here, I have taken table inside td and gave margin to table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2" style="border:0px;">
<table style="margin-bottom:10px;border:0px;">
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="border:0px;">
<table style="width:100%;margin-bottom:10px;border:0px;">
<tr>
<td >January</td>
<td>$100</td>
</tr>
</table>
</td>
</tr>
<tr style = "border-collapse: separate; border-spacing: 20px">
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
I want the gap after the first row to be small (for example 1px) and
20px after the second row.
You can achieve it by using padding on the td, and with pseudo selectors.
Something like this:
table tr td {padding-top: 20px;}
table tr:nth-of-type(2) td {padding-top: 1px;}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I want the whole row to change background-color on hover. The HTML is really old and I must leave it as it is. So I need this done purely in CSS. No JavaScript nor JQuery. Once I hover on .GMDataRow td I also need to trigger (change background) on the same element in another td. The order of elements is same in both td's.
Here's the smaller skeleton of code so you understand what im talking about:
<table>
<tr>
<td>code here</td>
<td>code here</td>
</tr>
</table>
Those two tds have identical children elements and the most important, they have same <tr class="GMDataRow">. So I was thinking maybe it can be done with :nth-child(). I need your suggestions
JSFiddle:
And here's the real skeleton:
<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="GMBodyLeft">
<table>
<tr class="GMDataRow" >
<td>
xxx
</td>
</tr>
<tr class="GMDataRow">
<td>
xxx
</td>
</tr>
</table>
</div>
</td>
<td>
<div class="GMBodyMid">
<table>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
try this :
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr{
background: #b8d1f3;
}
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
I encountered strange problem with table styling. Everything at least for me in code seems to be fine. however effects are unexpected.
I have to leave 0.3em margin as this is my student task, but I don't want the lines in the bottom to be separate.
Any webmaster can help? I would be very thankful. Here is peace of my code:
<table>
<tr>
<td>Kategoriasystematyczna</td>
<td>Takson</td>
</tr>
<tr>
<td>Domena</td>
<td>eukarionty</td>
</tr>
<tr>
<td>Królestwo</td>
<td>zwierzęta</td>
</tr>
<tr>
<td>Gromada</td>
<td>ssaki</td>
</tr>
<tr>
<td>Podgromada</td>
<td>ssakiżyworodne
<td>
</tr>
<tr>
<td>Infragromada</td>
<td>łożyskowce
<td>
</tr>
<tr>
<td>Rząd</td>
<td>parzystokopytne
<td>
</tr>
<tr>
<td>Rodzina</td>
<td>żyrafowate
<td>
</tr>
<tr>
<td>Rodzaj</td>
<td>Giraffa(Brünnich,1771)
<td>
</tr>
<tr>
<td>Gatunek</td>
<td>żyrafa
<td>
</tr>
</table>
and style
td{
border:1pxsolidblue;
margin:0.3em,0.3em,0.3em,0.3em;
}
table{
border:1pxsolidblue;
border-collapse:collapse;
}
And this is how my table looks like
Anyone? Antyhing?
you have opening tags instead of closing tags td:
change
<td>Gatunek</td>
<td>żyrafa
<td>
to
<td>Gatunek</td>
<td>żyrafa
</td>
in various places
As mentioned in my original comment to your answer (prior to deletion for redundancy), the problem is the syntax errors of unclosed <td> elements (possibly typos), correcting your HTML fixes the problem. Corrected HTML:
<table>
<tr>
<td>Kategoriasystematyczna</td>
<td>Takson</td>
</tr>
<tr>
<td>Domena</td>
<td>eukarionty</td>
</tr>
<tr>
<td>Królestwo</td>
<td>zwierzęta</td>
</tr>
<tr>
<td>Gromada</td>
<td>ssaki</td>
</tr>
<tr>
<td>Podgromada</td>
<td>ssakiżyworodne</td>
</tr>
<tr>
<td>Infragromada</td>
<td>łożyskowce</td>
</tr>
<tr>
<td>Rząd</td>
<td>parzystokopytne</td>
</tr>
<tr>
<td>Rodzina</td>
<td>żyrafowate</td>
</tr>
<tr>
<td>Rodzaj</td>
<td>Giraffa(Brünnich,1771)</td>
</tr>
<tr>
<td>Gatunek</td>
<td>żyrafa</td>
</tr>
</table>
JS Fiddle demo.
Also, your CSS is problematic, you have commas between the values of your margin property-values and no spaces to separate the properties of the border; fixed, it should look like:
td {
border: 1px solid blue;
margin: 0.3em;
}
table {
border: 1px solid blue;
border-collapse: collapse;
}
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/