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!!
Related
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
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.
In the CSS, I have
table {
max-width:100%;
background-color:transparent;
border-collapse:collapse;
border-spacing:0
}
In HTML, I have
<table class="table">
<tr>
<td>
<img width="90px" src="logo.png">
</td>
<td>
<div class="page-header">Header
<td>
</tr>
</table>
How do I change the background color of the second <td> without changing the other table's <td> in CSS file?
Mind you, I'm using Bootstrap as my base CSS. And it's kinda complicated when it comes to modifying the code.
Using CSS you can something like
table tr:first-child td:nth-child(2){
background:red;
}
Add a class to your desired <td> element.
In that class, specify for desired background
See here for a working example
Add a class to the td you want to change (for example, use 'headerTd'):
<table class="table">
<tr>
<td><img width="90px" src="logo.png"></td>
<td class="headerTd"><div class="page-header">Header<td>
</tr>
</table>
Then add the following rule to your css:
.headerTd{
background-color:red;
}
You can go for styling only the 2nd simply give the style attribute.
style="color:red"
.secondTD {
background:red;
}
<table class="table">
<tr>
<td><img width="90px" src="logo.png"></td>
<td class="secondTD"><div class="page-header">Header<td>
</tr>
</table>
But if you want without classes, then
table:tr:td {
background:red;
}
<table class="table">
<tr>
<td><img width="90px" src="logo.png"></td>
<td><div class="page-header">Header<td>
</tr>
</table>
in case when every row with first td:
table>tr:td {
background:red;
}
Border ALL the things!
I'm writing a HTML table and I'm getting extremely strange behavior. I expected to see all of my cells have a border, but that's not the case in Firefox.
I'm getting this:
<style>
.speciestable{ border:1px solid black;}
.speciestable td{border:1px solid #555; vertical-align:top; text-align:center; }
</style>
<table class="speciestable">
<tr>
<td rowspan="3">LEFT</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">Bottom</td>
</tr>
</table>
What's going on? Am I doing something wrong? Why don't all my cells have borders?
OOPS. I'm a moron. I had some conflicting syles in my external CSS that were removing the borders.
External.css
.tborder tr td:first-child{ border-width:0px; }
I realized that the HTML was actually this:
<table class="tborder>
<tr><td>
...
<table class="speciestable">
I am trying to span background image over 2 table rows but this does not seem to work.
Html:
<table id="branchTable">
<thead>
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</thead>
<tbody>
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tbody>
</table>
css:
#branch-logo {
background-image: url(/public/images/logo.png);
height:53px;
width:100px;
background-repeat: no-repeat;
background-position: left;
}
The image seems to be pushing the row down and not spanning accross.
UPDATE
<table id="branchTable">
<tr id="thead">
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</tr>
<tr id="tbody">
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tr>
</table>
rowspan does not seem to work between tbody and thead. Using tr does the trick.
You forgot your <tr>s in your table. That's probably what causes it to misbehave.
And as Scott says, you use logo in your html and branch-logo in your css.
Edit: In addition, I'm not at all sure if all major browsers support rowspanning a cell over a thead and a tbody. That would take some testing.