I've got two td's next to eachother (in a html5 email) and one is being pushed outside the table? I'm not sure why! I'm looking to have two columns next to eachother for text.
Thanks!
<tr>
<td bgcolor="#fdfcf8" style="padding:10px; padding-top:0; border-top: 0px solid #fdfcf8; font-family:arial, sans-serif; border-left:1px solid #fdfcf8; border-right:1px solid #fdfcf8; border-bottom:1px solid #fdfcf8;color: #003F6B;">hehe
</td>
<td bgcolor="#fdfcf8" style="padding:10px; padding-top:0; border-top: 0px solid #fdfcf8; font-family:arial, sans-serif; border-left:1px solid #fdfcf8; border-right:1px solid #fdfcf8; border-bottom:1px solid #fdfcf8;color: #003F6B;">hehe
</td>
</tr>
It's impossible to tell from your example code - look in other rows above/below for wide content which is pushing the width of that column.
Content widths in one row will affect the width of cells in other rows that are part of the same table.
Related
My pen: http://codepen.io/helloworld/pen/gimoI
I want to have a gray and white border on a table row to achieve a 3d effect.
Why is only one border color visible?
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<table style="width:100%;">
<tr>
<td style="vertical-align:top;width:60px;">Alarm 1</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Helmenstraße 5</span>
<span>90000 Nürnbergxxxxxxxxx</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
<tr>
<td style="width:60px;vertical-align:top;">
<div style="border-radius:28px;border:black solid 1px;background:red;">Alarm 1</div>
</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Langenburgerwald allee 25/c</span>
<span>70000 Wurmlingen ob der Tauber</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
</table>
body,html{
padding:0;
margin:10px;
background:#fafafa;
}
table{
border-collapse:collapse;
border-spacing:0;
}
table td
{
padding: 5px;
}
td {
border-bottom: gray solid 2px;
border-top: white solid 2px;
background:green;
}
Because the top border is white and is difficult to see the diference with the background.
I just updated it now:
body,html{
padding:0;
margin:10px;
background:#fcc;
}
table{
border-spacing:0px;
}
table td
{
padding: 5px;
border-bottom: gray solid 2px;
border-top: white solid 2px;
}
tr {
background:green;
}
You have to remove border-collapse:collapse;
Check this [http://codepen.io/anon/pen/vIHcf][1]
You need to work with box shadows . I just also described it in my one of the answer of same type of questio Link to that Answer or you can go through to this link to learn more about box-shadowsStudy box shadow
you can add
-webkit-box-shadow:10px 10px 5px #595959; -moz-box-shadow:10px 10px 5px #595959; -o-box-shadow:10px 10px 5px #595959;
in your td style & then find that is it same as you want ..
Both are visible on my side.
Little alternative or addition to achive 3d effects:
You can use CSS Outline. Its like a second border.
http://www.w3schools.com/css/css_outline.asp
I see the blank and grey border. But if you want to put some 3d effect on the rows why don't use box-shadow?
box-shadow: inset 1px 1px 3px #000;
Here I made an example with your code.
I have a div called #menu which is 800px wide. Inside of it, I have 8 navigation links. The elements in it should be as long as possible and should all be of the same width, but they should, together, fill the parent div on a single row (i.e. without wrapping).
Between each element, there should be a 1px border (or perhaps a 1px side-margin). All links, except the current page link (whichever link #current is applied to) should have a 1px solid #505050 bottom border. While the current page link should not have a visible bottom border (so that the navigation tab "merges" with the content div).
My current code does almost what I want already, but it's missing the border/margin between the links... If I add borders/margins to the sides, obviously, the current 12.5% width (see CSS code below) becomes inaccurate, and I can't fine-tune it so that it does fill the #menu div cross-browser (either the elements will overflow the #menu div, or they won't fill it - in at least one browser).
CSS:
#menu {
border:1px solid #505050;
border-bottom:none;
width:800px;
}
#menu a {
display:inline-block;
outline:none;
text-align:center;
width:12.5%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
border-bottom:1px solid #505050;
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu #current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
}
HTML:
<div id="menu">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
Link 8
</div>
Two requirements:
The solution should work in IE6 and later IE versions, as well as recent versions of Firefox, Chrome, Safari and Opera
No use of JavaScript, please
It's a big plus if:
The solution works so that links can be added without having to re-adjust the width for the elements
You may of course rewrite the CSS/HTML completely. No need to re-use any of the code above, I'm just showing my own approach. Also, I am aware that the text-shadow rule isn't supported in IE6, but it isn't a requirement.
How it currently looks
The expected result
hi i think u want to this Demo
add some css in you stylesheet as like this
#menu{
font-size:0;
}
#menu a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black; // depent your design .
}
Live demo
Change color or border according your design .
Another way is to use a html table instead of divs.
#menu {
width:800px;
border-collapse:collapse;
}
#menu td.other {
border:1px solid black;
}
td a {
display:inline-block;
outline:none;
text-align:center;
width:100%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu#current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
border-bottom:1px solid #D9D9D9;
}
<table id="menu" border="0">
<tr>
<td id="current">Link 1</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
<td class="other">Link 2</td>
</tr>
The title is pretty self explanatory, but basically I need the table row to be equal to the table space provided and for the table cells to have equal widths. I have tried numerous suggestions online but I haven't been able to figure it out. Any help is greatly appreciated.
HTML:
<div id="content">
<div id="boxes">
<table>
<tr>
<td>
<h2>News</h2>
<h6>The new website is up!</h6>
<p>The new website is up take a look around and be sure to visit our games page and have a good time. =)</p>
</td>
<td>
<h2>Other Stuff</h2>
<h6>This is where some other info goes</h6>
<p>We can type other types of information in here for the general public to know.</p>
</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</div><!--end boxes-->
</div><!--end content-->
CSS:
#content{
text-align:center;
width:90%;
margin-left:auto;
margin-right:auto;
}
#content #boxes table{
table-layout:fixed;
}
#content #boxes table tr td{
border-top:30px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
height:250px;
width:23%;
table-layout:fixed;
text-align:left;
float:left;
display:inline-block;
}
#content #boxes table tr td:hover{
border-top:30px solid #F00;
border-left:1px solid #F00;
border-right:1px solid #F00;
}
Change #content #boxes table tr td to:
border-top:30px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-collapse:collapse;
height:250px;
width:25%;
text-align:left;
Fiddle
EDIT: Thanks Pumbaa, removed unnecessary directives
I wanted the table row to have a border on the bottom and top. The code below works in IE but not in Firefox or Safari! Kindly help!
HTML
<tr class='TableRow'>
CSS
.TableRow{
border-bottom: 2px solid rgb(167,167,167);
border-top: 2px solid rgb(167,167,167);
}
As far as I know, you cannot set borders to table rows through CSS. But I will suggest you a workaround to this: Set the borders to the cells inside the row, and then use cellspacing="0".
Here is the CSS:
.TableRow td{
border-bottom: 2px solid rgb(167,167,167);
border-top: 2px solid rgb(167,167,167);
}
And a sample HTML would be:
<table cellspacing="0">
<tr class="TableRow">
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
The first row will be the one with borders.
Hope that helps.
EDIT: I tried your code and didn't show the border in any browser, including IE.
Add border-collapse:collapse to the table then you can add border to the tr.
Example:
table.myTable{
border-collapse:collapse;
}
table.myTable tr{
border:1px solid red;
}
Does this fix your problem?
tr.TableRow td {
border-bottom: 2px solid rgb(167,167,167);
border-top: 2px solid rgb(167,167,167);
}
It will add a border to all of the table data within any rows with the class TableRow. Adding the tr. at the start is good practice, as I assume you'll only be using this class with table row.
If you are applying this to multiple rows- you may also want to add border-collapse:collapse; which will collapse the borders into a single border.
I set the border for the table event_calendar tr to be red, it works in everything except IE 6 & 7. What is wrong with my CSS?
table#event_calendar tr {
border:1px solid red;
}
<div class="content-body">
<table id="event_calendar">
<tr class="calendarHeader">
<th><div class="calendarMonthLinks"><<</div></th>
<th colspan="5"><h1>April 2009</h1></th>
<th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">>></a></div></th>
</tr>
<tr>
<td class="calendarDayHeading">Sunday</td>
<td class="calendarDayHeading">Monday</td>
<td class="calendarDayHeading">Tuesday</td>
<td class="calendarDayHeading">Wednesday</td>
<td class="calendarDayHeading">Thursday</td>
<td class="calendarDayHeading">Friday</td>
<td class="calendarDayHeading">Saturday</td>
</tr>
</table>
</div>
IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)
table#event_calendar {
border-collapse: collapse;
border-right: 1px solid red;
border-left: 1px solid red;
}
table#event_calendar td, table#event_calendar th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Your CSS is sensible enough, but IE just doesn't do borders on tr elements. If you use this style you should get the intended result though:
table#event_calendar {
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-collapse:collapse;
}
table#event_calendar td, table#event_calendar th {
border-bottom:1px solid red;
}
Setting the border on the td is the easiest solution. But if you really really want to make the borders on <tr>, you can always set:
tr { display:block; border-bottom:1px dotted #F00; }
By doing this, you loose the common width between the <td>. If you want to make all of them equal on width, set the display for <td> to inline-block and set some width:
td { display:inline-block; width:20%; }
It helps when you want to draw some border on the <td> and on <tr>.
CSS generated content like tr:before{} or tr:after{} can always help as well.
Change your CSS selector to "table#event_calendar tr td" and it should work.