I am doing an example having tables in a table, but parent table should not have border. I tried, but it is working. I check in W3School css tutorial also even no result. I tried:
style="border: none;"
border:0
Both not working in Chrome
th {
border: 1px solid black;
padding-left: 7px;
padding-right: 7px;
}
td {
border: 1px solid black;
padding-left: 7px;
padding-right: 7px;
}
<table id="t02" border="0">
<tr>
<td>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th>Available<br>On</th>
<th>Ids</th>
</tr>
<tr>
<td><b>Phone</b></td>
<td><b>9999999</td>
</tr>
</table>
</td>
<td>
<br><br>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Available<br>On</th>
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Ids</th>
</tr>
<tr>
<td><b>Phone</b></td>
<td><b>9999999</b></td>
</tr>
</table>
</td>
</tr>
</table>
Output
Several issues in your code...
...missing a closing bracket...
...why using inline styles...
...IDs should be unique - use a class for your "t01"...
But main important advice: do not use tables for layouting, these days.
Rather learn flexbox, or CSS grid.
Related
I'm trying to recreate the following diagram with HTML tables:
The following snippet works in Firefox:
table { border-collapse: collapse }
td { padding: 10px; border: 1px solid black; }
<table>
<tr>
<td>Foo</td>
<td rowspan="2" style="border-left: none">Bar</td>
</tr>
<tr>
<td style="border-right: none">Baz</td>
</tr>
</table>
but in Safari and Chrome it produces
What is the simplest (i.e. least amount of code) way to make it work in Safari and Chrome? I'd prefer not to change the structure of the table itself (but I'll get rid of the style attributes in the HTML in the final version).
If it matters, I'm using the latest version of each browser on macOS 10.15.7.
Looks like a bug. This does not make sense
FX: Crome
table {
border-collapse: collapse
}
td {
padding: 10px;
}
td.noleft {
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white !important;
}
td.noright {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid white;
}
td.other {
border-right: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
}
<table>
<tr>
<td class="other">Foo</td>
<td rowspan="2" class="noleft">Bar</td>
</tr>
<tr>
<td class="noright">Baz</td>
</tr>
</table>
let's consider box-shadow for this particular case:
table {
border-collapse: collapse
}
td {
padding: 10px;
}
<table>
<tr>
<td style="box-shadow: 0 0 0 1px black inset;">Foo</td>
<td rowspan="2" style="box-shadow: -1px 1px 0 black inset, 0 -1px 0 black inset;">Bar</td>
</tr>
<tr>
<td style="box-shadow: 1px -1px 0 black inset;">Baz</td>
</tr>
</table>
Also like this:
table {
border-collapse: collapse;
box-shadow: 0 0 0 1px #000;
}
td {
padding: 10px;
}
<table>
<tr>
<td style="box-shadow: -1px -1px 0 black inset;">Foo</td>
<td rowspan="2" >Bar</td>
</tr>
<tr>
<td >Baz</td>
</tr>
</table>
I have a simple table with styles applied via inline CSS, and it is working. But when I try to add the CSS to the document via the element, it doesn't work in Chrome. I checked the W3Schools CSS tutorials, but couldn't find a solution.
My code is this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr {
border: solid 1px black;
padding-left: 7px;
padding-right: 7px;
}
</style>
</head>
<body>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th>Available<br>On</th>
<th>Ids</th>
</tr>
<tr>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
</td>
</tr>
</table>
<br><br>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Available<br>On</th>
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Ids</th>
</tr>
<tr>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
</td>
</tr>
</table>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FIDUIS25NER6
Out put:
Change your CSS to the following. It has a typo.
<style>
th {
border: 1px solid black;
padding-left: 7px;
padding-right: 7px;
}
</style>
If you want to add border to tr visit this link.
Change this:
border: solid 1px black;
to this:
border: 1px solid black;
<style type="text/css">
th {
border: solid 1px black;
padding-left: 7px;
padding-right: 7px;
}
</style>
Actually in your code your are giving border to tr which does not make sense click here to know more.
So replace tr to th in your above code and it work.
The following does not achieve the result
<tr><td colspan="4">Title</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td width="33.33%">1</td><td width="33.33%">2</td><td width="33.33%">3</td></tr>
<tr><td width="33.33%"> </td><td width="33.33%"></td><td width="33.33%"></td></tr>
The there is an extra space after the third cell to take into account the 4th column. How can I remove this so that the entire row is equally divided into three cells that fill it?
For equal widths you should create 2 table like this:
<table>
<tr><td colspan="4">Title</td></tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Here is the fiddle: http://jsfiddle.net/Q57gW/2/
The best answer would be to not use table. If you REALLY need that table, one (very messy) soultion could be to have 12 columns in each row, and have colspan="3" in your first row, and colspan="4" in your other rows.
jsfiddle link for this solution
<table><tbody>
<tr>
<td style="border: 1px solid #333; width: 240px;" colspan="12">Title</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 80px;" colspan="4">1</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">2</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">3</td>
</tr>
</tbody></table>
But I would HEAVILY advice you to use divs or spans or something else than table cells. Here's a much nicer solution using paragraphs:
jsfiddle link
html:
<div style="width: 240px;">
<p class="onecell">Title</p>
<p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p>
<p class="threecell">1</p><p class="threecell">2</p><p class="threecell">3</p>
</div>
css:
p {
float: left;
border: 1px solid #333;
box-sizing: border-box;
padding: 0;
margin: 0;
}
p.onecell {
width: 100%;
}
p.fourcell {
width: 25%;
}
p.threecell {
width: 33%;
}
I'm new to html and I'm trying to create tables and style them but they are not styled as I'd like: http://jsfiddle.net/DpLy5/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabeller</title>
<style>
body{
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</tr>
</table>
</body>
</html>
The middle row first column should be 150px wide but its bigger then that. I don't know what it could be. Any help? Thank you
You need to add a colspan='3' on your first and third row tr. As you have it set to 700px and it's a single column it will push the one above/below it to the same:
http://jsfiddle.net/spacebean/DpLy5/1/
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
</tr>
</table>
Also, I highly suggest using non-inline styling as it will make it a lot easier to see what you are doing and separate style from content.
http://jsfiddle.net/spacebean/DpLy5/8/
<table class='myTable'>
<thead>
<tr>
<th colspan='3'>
<img src="http://placehold.it/700x150" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>adad</td>
<td class='main'>adad</td>
<td>adad</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
</tr>
</tfoot>
</table>
css:
.myTable {
width: 700px;
}
.myTable td, .myTable th {
border: solid 1px black;
}
.myTable thead th {
height:150px;
}
.myTable tbody td {
width: 150px;
height:700px;
background-color: #808080;
}
.myTable tbody td.main {
width: 400px;
background-color: #fff;
}
.myTable tfoot td {
height:75px;
background-color: #808080;
}
Make the td in the first tr span the three columns using colspan="3" similar to the td in the last tr.
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
JS Fiddle: http://jsfiddle.net/DpLy5/3/
you will need to add colspan="3" to in first row & last row... that's it.
http://jsfiddle.net/DpLy5/6/
<table style="border: 1px solid black;">
<tr>
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>
You are in need of the colspan attribute. The colspan attribute in fact says "Let me span this amount of column in the table".
Which means colspan="3" is translated to "Let me span 3 columns in the table"
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
However, according to your JSFiddle, you are trying to make a raster for your layout. Achieving this with the use of table's is a no-go, it's a major bad practice.
This is because a table is something where you put data in, and an entire layout is not data.
The best way to set up and layout is using Div's. http://www.w3schools.com/html/html_layout.asp
The mouseover function is not working with Google Chrome. Working fine with Firefox and IE. While mouseover the border bottom is not disappearing. But if removing border-collapse: collapse it's working fine. Why is this? Any solution.
css:
html, body{
margin: 0;
padding: 0;
}
.table {
border-collapse: collapse;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border1 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border2 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
padding: 1px;
}
Table:
<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
</tr>
</table>
Do it like this: put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.border1
{
border:1px solid #000000;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color: #FFFFFF;
}
.border1:hover
{
border:1px solid transparent;
border-top:1px solid #000000;
padding:1px;
background-color: #deecf9;
}
Your HTML should be something like:
<table width="1024" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
No need to work with the mouseovers as an attribute, just use css.
Edit: i've noticed that you're using the css border-collapse property. This sets whether the table borders are collapsed into a single border or detached as in standard HTML. Try removing this line or set it to "separate", maybe this will work.