I have an example of a table that I'm trying to generate here:
http://jsfiddle.net/DTsxa/
I'm having difficulty with the table header though when the table is viewed with Internet Exploder in IE7 Mode, or IE8 Compatibility Mode. The text "Fund Performance Figures as at 19 November 2010" should be on a single line, but it's being squished into the left on multiple lines.
I thought white-space: nowrap; (as per the sample below) might have fixed this, but it's not having any effect at all.
<tr>
<th class="TableHeaderRow" colspan="8">This Fund's Performance Figures as at 1 December 2010</th>
</tr>
with this CSS:
th.TableHeaderRow
{
background-color: #A4A247;
padding: 10px 5px;
font-weight:bold;
white-space: nowrap;
}
Can somebody see a work around to this issue?
your problem appears to be here:
.PerformanceTable th
{
width: 50px;
border-left: solid 1px #00573D;
border-top: solid 1px #00573D;
/*background-color: #FFF;
color: #00573D;*/
vertical-align: top;
/*height:28px;*/
}
IE is accepting your width: 50px and forcing it to be shorter. removing that line made it look correct for me. Give that a try
Try using "white-space: pre;". That seems to work better than nowrap.
Related
I'm preparing the email html file for mailing. I'm using the table, tr, td tags. The whole content of my html so far is placed within a table, including another small table within one of the cells (see pictures below). I would like the whole table to display always in the center. I would also like the small table to display in the middle of the cell. The width of outer table it fixed.
I tried putting into CSS:
margin-left: auto;
margin-right: auto;
and
margin: 0px auto;
, all of which I have found in here. The preview looks fine with either, the preview after uploading the file into mass mailing system works ok as well. But after sending, the centering does not display at all (the inner table also doesn't display at all in Gmail, only content of it). So I'm looking for the most common, most widely used html property, which would most likely display the table in the middle in every browser/mail client. OR, for the advice regarding the possible wrong usage of class properties.
My whole section:
<style>
table, th, td {
border-collapse: collapse;
font-family: Verdana, sant-serif;
}
th, td {
padding: 15px;
text-align: left;
}
.main {
width:1000px;
border: 5px solid #114889;
margin: 0px auto;
}
.inside {
width: 500px;
border: 1px dotted #0000CC;
background-color: #CCE5FF;
text-align: center;
font-size: 10px;
margin: 0px auto;
}
</style>
I am not a pro with the topic so I apologize for the use of wrong terminology.
Edit:
Display in Outlook. All is well but the left alignment:
Display in Gmail. No tables whatsoever:
Outlook only works with tables, so you're right to approach it from that angle. However, some Gmail environments do not even look at embedded CSS (CSS within <head> section). You'll need to 'inline' the CSS (https://www.campaignmonitor.com/resources/tools/css-inliner/).
To center a table in Outlook, use the attribute align on the <table> element like so: <table width="300" align="center"...>. You may also need to wrap it all with <center>...</center>, even though that tag is deprecated (yes, email is that old!).
You'll find in general Outlook will support the attributes - e.g. for border colours, <td bgcolor="#abcdef"...> - whereas others will support the inline style, e.g. <td style="background-color:#abcdef"...>. You should use both, and not rely on embedded CSS.
I can update more specifically if you need, after posting the affected HTML.
Try this one.
.parentTable {
position: relative;
}
.childTable {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I'm struggling to set an EXACT height on a html table-row.
The left column are two divs of height 44px each, and the right column is the table. The height of each row is set to 44px but rows are displayed as 44.44px in height on Google Chrome web inspection tool.
SASS:
table {
width: 100%;
border: none;
tr {
height: 44px;
cursor: pointer;
td {
padding: 0 16px;
border-bottom: 1px solid $bg-light;
vertical-align: middle;
}
}
}
I'm also using Eric Meyers css-reset, although the problem remains with or without it.
Any clues on where the extra .44px comes from?
EDIT
Problem seems to be specific to Google Chrome. Safari renders the correct height.
Possible duplicate of Eliminate gap between tbody tags
but, this is a border-collapse, border-spacing issue with your table next to your div. By default tables have that annoying extra space there. Also make sure that your td's and divs are display inline-block/block or flex if you want to align items in the center.
here's some code and a link for how to resolve it.
table {
border-spacing: 0;
border-collapse: collapse;
}
https://codepen.io/calebswank11/pen/rJvBWK
I have a table in which I would like the borders to collapse and all the cells to touch. I feel like I may be missing something obvious, but the bottom borders are not showing at all despite having height assigned to them. They instead just separate the cells from one another allowing the background color to show through (red in the example).
If I change the border-collapse to separate the borders re-appear, but the gaps remain as well as adding gaps between the columns as well.
JSfiddle
You are not targeting the Table Row, see fiddle: https://jsfiddle.net/32o87x7L/3/
.defaultTable tr{border-bottom: 2px solid blue;}
.defaultTable th,
.defaultTable td {
position: relative;
display: table-cell;
vertical-align: top;
padding: 9px 16px;
font-size: 14px;
line-height: 20px;
background: #eee;
border: none;
//border-bottom: 2px solid blue;
box-sizing: border-box;
}
As is usually the case, I solved my own problem right after submitting my question. :-/
Apparently table-cells do not take too well to positioning as they cannot be consistently. Removing position: relative; from the .defaultTable th, .defaultTable td did the trick.
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
I have some tables which render fine in IE and Chrome. But in Firefox some of the border arbitrarily don't show or have different widths. You can see an example Here. Below is the relevant css:
table {
font-size: 1.0em;
border-collapse: collapse;
border: 3px solid #004C87;
margin: 5px 5px 5px 5px;
}
th, td {
padding-top: 7px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #004C87;
text-align: left;
vertical-align: top;
line-height: 1.3em;
}
In the image below I took screen shots as it renders in the different browsers. The black arrow depicts the situation where the line/border does not show. The red arrow illustrates situation where the width is different.
If I were to repeat these tables the occurrences would be arbitrary.
I had an issue where borders were appearing when they shouldn't have been.
I resolved it with this:
border-collapse:separate;
I know it's not the direct answer, but the search brought me here.
I'm posting this as the answer as I'm convinced at this point you must be just a little zoomed out in Firefox. Try pressing Ctrl+0
If you compare the two tables in the image you provided, you can see that the bottom one is slightly larger than the top one.