I have a html structure like this and I can't figure out how to fix it.
<table border="0" cellspacing="0" cellpadding="0" align="center" width="200px" class="external">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="internal">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</td>
</tr>
</table>
I'd like to collapse the borders between the external table and the table inside the <td>.
Is it possible?
After that I'd like to have the border of the internal table with another color from the external table.
What you're seeing is the borders of the cells in the internal table, not it's external borders. The tricky thing is that you don't want to turn off the borders of those cells completely because then it'll look skoogiwampus.
Try
.internal {
border: none;
}
.internal td,
.internal th {
border-color: yellow;
}
.internal tr:first-child th {
border-top: none;
}
.internal tr:last-child td {
border-bottom: none;
}
.internal tr td:first-child,
.internal tr th:first-child {
border-left: none;
}
.internal tr td:last-child,
.internal tr th:last-child {
border-right: none;
}
This uses pseudo-selectors to deal only with the borders you need to turn off. It's verbose, but it'll do what you need.
https://jsfiddle.net/aff19ahg/3/
Related
Is there a way to make the table column two look like column one while keeping the th tag. The line separating the two still has to be there.
The code I got so far:
.noborders th {
border-bottom: 0;
}
table {
border-collapse: collapse
}
#test {
border-collapse: collapse;
border: 0;
}
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
<tr>
<td id="test"></td>
<td></td>
</tr>
</body>
What I want it to look like
What it looks like
First, place your <th> inside <tr>...
Use class instead of id(id should be unique)
Just set border:0 to all td, th and apply border-right to .test
th,
td {
border: 0;
}
td {
padding: 20px;
}
table {
border-collapse: collapse
}
.test {
border-collapse: collapse;
border-right: 1px solid;
}
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th class="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td class="test"></td>
<td></td>
</tr>
</table>
You have a lot of terrible code here. For one, fix your formatting, for two, you're missing a lot of tags (closing </body>, and a <tr> wrapping your headers). Three, you don't even have the class you're referencing in your css on the table itself. Fourth, you can't have multiple ID's with the same name.
<style>
.noborders th {
border-bottom:0;
}
table {
border-collapse:collapse
}
#test {
border: 0;
}
</style>
HTML
<body>
<table class="noborders" cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td id="test2"></td>
<td></td>
</tr>
</table>
</body>
there is th/td property called “rowspan” that will do what you want.
https://www.w3schools.com/tags/att_td_rowspan.asp
For the following table, the text in the thead element doesn't respond to any CSS rules.
I thought it would inherit the rules from thr table.declensionTable element, but it doesn't.
I created a CSS rule with the table.declensionTable thead selection, but that didn't work either.
What am I doing wrong?
body {
font-family: "Verdana", Sans-serif;
}
table.declensionTable{
font-family: "Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
table.declensionTable thead{
font-family: "Courier New", Serif;
}
table.declensionTable th{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<table class="declensionTable">
<thead><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</thead>
<tbody>
<tr>
<th></th><th>Singular</th><th>Plural </th>
</tr>
<tr>
<td><strong>Nom</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong></td> <td>klubu</td> <td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong></td> <td>klubowi</td> <td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong></td> <td>klubem</td> <td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong></td> <td>klubie</td> <td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong></td> <td>klubie</td> <td>kluby</td>
</tr>
</tbody>
</table>
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
The <thead> element must have one or more <tr> tags inside.
http://www.w3schools.com/tags/tag_thead.asp
Probably because you're confusing the browser with your markup.
The thead tag is expecting table data (tr, td, etc.)
Why not just use a styled header tag above the table?
Fiddle: http://jsfiddle.net/on1ypL4z/
body {
font-family:"Verdana", Sans-serif;
}
table.declensionTable {
font-family:"Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
h3.table-desc {
font-family:"Courier New", Serif;
}
table.declensionTable th {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<h3 class="table-desc"><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</h3>
<table class="declensionTable">
<tbody>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
<tr>
<td><strong>Nom</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong>
</td>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong>
</td>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong>
</td>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong>
</td>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong>
</td>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
Here's an alternative approach to what you are trying to do using a definition list:
<dl>
<dt>klub</dt>
<dd>
<div><em>club</em>; an inanimate masculine noun</div>
<table class="declensionTable">
<thead>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nom</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Gen</th>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<th>Dat</th>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<th>Acc</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Inst</th>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<th>Loc</th>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<th>Voc</th>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
</dd>
</dl>
Fiddle: http://jsfiddle.net/v4h6zkcz/2/
So I appreciate the help.
Regulus and Bitwise Creative were both right, but they didn't take it far enough.
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
It turns out I was just being a complete n00b and I put my th tags inside the body of the table, instead of in the thead header. So while it was right that I needed some tr tags inside thead /thead, the fact was I already had the header properly formatted- just in the wrong place.
I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.
<table border="1" style="background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;">
<tr style="background-color:orange;color:white;">
<th style="padding:3px;">Table header</th><th style="padding:3px;">Table header</th>
</tr>
<tr>
<td style="padding:3px;">Table cell 1</td><td style="padding:3px;">Table cell 2</td>
</tr>
<tr>
<td style="padding:3px;">Table cell 3</td><td style="padding:3px;">Table cell 4</td>
</tr>
</table>
My question is how do i convert the inline CSS in this html example into an external style sheet?
would the css look like this?
tr {background-color:orange;color:white;}
table {background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;}
td, th {padding:3px;}
Use table tr:first-child instead of tr as only the first row has inline styles:
table {
background-color: yellow;
border: 1px dotted black;
border-collapse: collapse;
width: 80%;
}
table th, table td {
padding: 3px;
}
table tr:first-child {
background-color: orange;
color: white;
}
http://jsfiddle.net/URBMh/2/
Is there any way i can set padding to the thead alone of a table?
table th
{
padding:15px;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Jhon</td>
<td>Smith</td>
<td>$200</td>
</tr>
</table>
<style>
table, td, th { border : 1px solid black; }
th { padding : 13px; }
td { padding : 15px; }
</style>