I was wondering if it is possible to have the table embedded inside the td to have the same height as the td.
<table>
<tr>
<td style="background:red">
<table style="background:blue">
<tr>
<td>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
Here is the jsfiddle... https://jsfiddle.net/ekh6z8w0/
As you can see through the fiddle the embedded table is off by a pixel or two. Is it possible to have the blue inside overlap the slight red border?
Remove the padding from td, should work.
td{
padding:0;
}
You can try like this: Demo
CSS:
table>td, table>td>table {
padding:0;
margin:0;
}
table table {
padding:0;
margin:0;
height:100%;
border:1px solid red;
background-color:blue;
color:#fff;
}
HTML:
<table>
<tr>
<td>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
Hope this is what you want.
Related
I want to keep the same width of <tr> of the two rows.
The first <tr> contains two <td> the second row contains only one <td> but as it is now, the second row is not with same width as the first one (see my script pleas)
How to keep the first row as it is and make the second one 100 width ?
table{
width:100%;
}
table tr td{
width:100%;
border:1px solid black;
border-collapse: collapse;
}
.second-row{
width:100%;
}
<table>
<tr class="first-row">
<td>hello</td>
<td>world</td>
</tr>
<tr class="second-row">
<td>hello world</td>
</tr>
</table>
use colspan
table{
width:100%;
}
table tr td{
width:100%;
border:1px solid black;
border-collapse: collapse;
}
.second-row{
width:100%;
}
<table>
<tr class="first-row">
<td>hello</td>
<td>world</td>
</tr>
<tr class="second-row">
<td colspan="2">hello world</td>
</tr>
</table>
I'm trying to get this table in front of this image and it just doesn't happen, I know the table isn't that good its just an example!
HTML
<section>
<div class="image-wrapper">
<img src="img/animesea.png" alt="animeb-image" class="picimage">
<table>
<tr>
<td>a</td>
</tr>
</table>
</div>
</section>
Thanks
I would place the image as a background-image like #SVK suggested.
Here is another option. Wrap the img tag and the table tag in separate divs and apply position: absolute on both.
jsFiddle
You could also use z-index and positioning. jsFiddle. It's not clear exactly what you want to achieve, but based on what you've asked I would apply the image as a background like #SVK said.
You can use css style so background image will be adjusted all the time with table size.
There is code :
.tableBckImg
{
background:url(http://www.placehold.it/300x300);
background-repeat:no-repeat;
background-size:100% 100%;
}
<table cellspacing="0" cellpadding="0" border="0" class="tableBckImg">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
You can change number of rows and columns and see how background image expand or shrink, here, in fiddle example
In this example, background image is 300x300 px.
Check it out.You will get some idea.
<!DOCTYPE>
<html>
<style>
.image-wrapper
{
width:650px;
height:488px;
background: url("http://stuffpoint.com/sea-and-beach/image/56782-sea-and-beach-anime-sea-pic.jpg") no-repeat;
background-size:contain;
padding:5px;
margin:auto;
}
table
{
width:650px;
height:150px;
border:2px solid yellow;
color:white;
background-color:rgba(0,0,0,0.5);
text-align:center;
padding:2px;
}
th
{
border:1px solid yellow;
color:white;
font-size:20px;
}
td
{
border:1px solid yellow;
color:white;
}
</style>
<body>
<section>
<div class="image-wrapper">
<table>
<th colspan='3'>Person name and age</th>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Age</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>54</td>
</tr>
<tr>
<td>John</td>
<td>smith</td>
<td>74</td>
</tr>
</table>
</div>
</section>
</body>
</html>
I want the cell align center , but keep text right align. for detail please run the code.
table{border:solid ; width:100%}
th{text-align:center}
td{text-align:center}
<div>now my table show like this</div>
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td>123</td><td>456</td><td>789</td></tr>
<tr><td>1231</td><td>4561</td><td>7891</td></tr>
<tr><td>12312</td><td>45612</td><td>78912</td></tr>
</table>
<br>
<div>but i want to like this</div>
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td> 123</td><td> 456</td><td> 789</td></tr>
<tr><td> 1231</td><td> 4561</td><td> 7891</td></tr>
<tr><td>12312</td><td>45612</td><td>78912</td></tr>
</table>
i solve it with add more th and td but it work Correctly
code
table{border:solid ; width:100%}
th{text-align:center}
td{text-align:right}
#td{
width: 20px;
}
<div>now my table show like this</div>
<table>
<tr><th> </th><th id="td">hello</th><th> </th><th id="td">world</th><th> </th><th id="td">jasper</th><th> </th></tr>
<tr><td> </td><td id="td">123</td><td> </td><td id="td">456</td><td> </td><td id="td">789</td><td> </td></tr>
<tr><td> </td><td id="td">1231</td><td> </td><td id="td">4561</td><td> </td><td id="td">7891</td><td> </td></tr>
<tr><td> </td><td id="td">12312</td><td> </td><td id="td">45612</td><td> </td><td id="td">78912</td><td> </td></tr>
http://liveweave.com/6EFpKY
One solution is to add a div inside th th and td elements and give them a fixed length.
HTML:
<table>
<tr>
<th>
<div>hello</div>
</th>
<th>
<div>world</div>
</th>
<th>
<div>jasper</div>
</th>
</tr>
<tr>
<td>
<div>123</div>
</td>
<td>
<div>456</div>
</td>
<td>
<div>789</div>
</td>
</tr>
<tr>
<td>
<div>1231</div>
</td>
<td>
<div>4561</div>
</td>
<td>
<div>7891</div>
</td>
</tr>
<tr>
<td>
<div>12312</div>
</td>
<td>
<div>45612</div>
</td>
<td>
<div>78912</div>
</td>
</tr>
</table>
CSS:
table {
border:solid;
width:100%
}
td div {
width:40px;
text-align:right;
margin-left: auto;
margin-right: auto;
}
th div {
width:40px;
text-align:right;
margin-left: auto;
margin-right: auto;
}
Try it out:
http://fiddle.jshell.net/hdgjnuab/1/
Hope it helps!
Change your CSS and HTML table code with below one.
CSS:
table{border:solid ; width:100%}
th{text-align:center}
td{direction:rtl;}
.title {margin-right:46%;}
HTML:
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr>
<td><span class="title">123</span></td>
<td><span class="title">456</span></td><td><span class="title">789</span></td></tr>
<tr><td><span class="title">1231</span></td><td><span class="title">4561</span></td><td><span class="title">7891</span></td></tr>
<tr><td><span class="title">12312</span></td><td><span class="title">45612</span></td><td><span class="title">78912</span></td></tr>
</table>
Output:
No need to define fix width of table cells.
I am trying to have the last row span the 3 rows of the previous row. However for some reason this is not working, I have rewritten the code several times in several different ways and cannot seem to get this to work:
CSS:
.div_walkthroughs_wrapper {
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
border:0;
}
#table_walkthroughs {
margin:0 auto;
height:100%;
}
#table_walkthroughs td {
vertical-align:middle;
text-align:center;
padding:10px;
border:1px solid black;
}
HTML:
<body>
<div class="div_walkthroughs_wrapper">
<table id="table_walkthroughs">
<tbody>
<tr>
<td>
column 1
</td>
<td>
column 2
</td>
<td>
column 3
</td>
</tr>
<tr>
<td rowspan="3">this row wont spant 3 rows</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you might be looking for the colspan property.
...
<tr>
<td colspan="3">this row wont spant 3 rows</td>
</tr>
...
I cannot figure out the positioning problem using table in firefox and IE.
The fiddle will show the complete problem properly http://jsfiddle.net/qfDB9/ Even after providing proper height and width the problem persists. The actual reason I created the table is perfectly shown in Chrome whereas IE and Firefox has positioning problem.
CSS:
table tr #number_table {
width:50px;
height:50px;
text-align:center;
font-size:50px;
}
table tr #photo_table {
width:150px;
height:100%;
text-align:center;
}
table tr #description_table {
width:400px;
padding-bottom:2em;
font-size:20px;
}
table tr #band_name {
text-align:center;
height:25px;
}
HTML :
<table border="1" cellpadding="0" cellspacing="5" width="600px" style="color:#000;">
<tr>
<td id="number_table">1</td>
<td rowspan="2" id="photo_table"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></td>
<td rowspan="4" id="description_table">something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br></td>
</tr>
<tr>
<td rowspan="3"></td>
</tr>
<tr>
<td id="band_name">Something</td>
</tr>
</table>
Is there a way to resolve this.
You need to vertically align the content in the <tr> tags
table tr { vertical-align:top; }
See DEMO
I might also add that you should consider using div's instead of tables
[SOLVED] Check This out. Just Add valign="top" to the <tr> or <td>
DEMO HERE: http://jsfiddle.net/qfDB9/9/
Suggestion, Always try too use the semantic code. like using thead, tbody, as it helps in implementing the CSS too. Also help in streamlining the CSS throughout the site.
Solution You can add this CSS "table tbody td{vertical-align:top;}" so all the content in all <td>s should be align to top. So if you have to give some table heading which are usually align bottom then you can handle by <thead> <th> "vertical-align:bottom.".
Please refer the code here:
HTML
<table border="1" cellpadding="0" cellspacing="5" width="600px" style="color:#000;">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td id="number_table">1</td>
<td rowspan="2" id="photo_table"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></td>
<td rowspan="4" id="description_table">something something <br>
<br>
<br>
<br>
something something <br>
<br>
<br>
<br>
something something <br>
<br>
<br>
<br>
something something <br>
<br>
<br>
<br></td>
</tr>
<tr>
<td rowspan="3"></td>
</tr>
<tr>
<td id="band_name">Something</td>
</tr>
</tbody>
</table>
CSS
table thead th{vertical-align:bottom;}
table tbody td{vertical-align:top;}
table tr #number_table {
width:50px;
height:50px;
text-align:center;
font-size:50px;
}
table tr #photo_table {
width:150px;
height:100%;
text-align:center;
}
table tr #description_table {
width:400px;
padding-bottom:2em;
font-size:20px;
}
table tr #band_name {
text-align:center;
height:25px;
}
You can refer to the fiddle too: http://jsfiddle.net/aasthatuteja/sU3SS/
Let me know if the helps!
Enjoy!!