No sure why the borders are not displaying correctly. I tried:
/* ------ global ------ */
body {
margin: 0 auto;
padding:0 0;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
}
/* ------ Content Wrapper ------ */
#wrapper {
margin: 0 auto;
width:760px;
text-align:left;
}
#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
}
#content table td {
border:solid 1px black;
}
Do I need to list all the CSS border properties to get the borders on the whole table, like this:
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
or more ......
I haven't done this yet, but I have had to do this in the past with some tables to get the borders on all sides for lte IE7. It was just as a last resort since I didn't know what else to do.
Consider the following jsFiddle, which works correctly in IE7 by showing a 1 pixel solid black border on table cells.
I didn't change any of your code, but added a rule to include borders on table header cells table th as well as table data cells table td.
HTML:
<div id="content">
<table>
<tr>
<th scope="col">Column</th>
<th scope="col">Column</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
CSS:
#content table {
font-size: 0.8em;
border-collapse: collapse;
text-align: left;
width: 100%;
}
#content table th,
#content table td {
border: solid 1px black;
padding: 5px 10px;
}
If your table cells still aren't showing any borders, you might have one or more rules in your stylesheet that appear later — or have more CSS Specificity — that are overriding your styles.
Try using border-collapse:separate for IE7 like this:
#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
*border-collapse:separate;
}
apply border-collapse: collapse to the table, it should fix it :)
Related
I have the above table shown in this picture. I want to fix the space between the Jill and Smith. Take the last table as an example. Not sure how to explain this because English is not my native language.
http://i.stack.imgur.com/IC4CP.png
EDIT
My code
<table>
<tr>
<th>Jill</td>
<th>Smith</td>
<th>Santa</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith5555</td>
<td>50555555555</td>
</tr>
<tr>
<td>Jillffff</td>
<td>Smith5555</td>
<td>50555555555</td>
</tr>
<tr>
<td>Jill5555</td>
<td>Smith5555</td>
<td>50555555555</td>
</tr>
</table>
CSS
table, th, td {
width:100%;
border:1px solid #ddd;
padding:10px;
}
table {
border-collapse:collapse;
}
table td {
font-size:13px;
}
table th {
text-align:left;
font-size:14px;
text-transform:uppercase;
font-weight:normal;
background:#36c;
color:#fff;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
This is where your problem is,
table, th, td {
width:100%; //This makes your table too big
border:1px solid #ddd;
padding:10px;
}
I'd say remove the width attribute and your table should be fine :)
It was your CSS code
I would look at the width attribute. Currently, you have it set to 100%. That means it's going to take up the entire width of the screen. Perhaps, this
<style>table, th, td {
width:auto; //auto will adjust the table width automatically based on the size of each column
border:1px solid #ddd;
padding:10px;
}
table {
border-collapse:collapse;
}
table td {
font-size:13px;
}
table th {
text-align:left;
font-size:14px;
text-transform:uppercase;
font-weight:normal;
background:#36c;
color:#fff;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}</style>
Just change width in your CSS as mentioned in the code below.
To improve your HTML, <th> elements have been closed as </td>. Please change it to </th>.
table, th, td {
border: 1px solid #ddd;
padding: 10px;
}
table {
width: 100%; /* Make table 100% */
border-collapse: collapse;
}
table th {
width: 33.33%; /* Make column i.e <th> 33.33% */
text-align: left;
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
background: #36c;
color: #fff;
}
Hope it helps!
You will want to add width attribute (this is depreciated in HTML5, forgot) style to your <th> tags.
For example
<tr>
<th style="width:35%">Jill</td>
<th style="width:35%">Smith</td>
<th style="width:30%">Santa</td>
</tr>
In addition you should not have 100% width for th or td. Change your CSS to:
table {
width:100%;
}
table, th, td {
border:1px solid #ddd;
padding:10px;
}
I want in a table in html a border left.
Here is the table
.weTable td{
border-color:#dcdcdc;
border-width:1px;
border-style:solid;
}
This is for the table cell and this has the table
border-left: 15px solid #548dd4;
My problem is I want a vertical line left and its not a straight line on this way.
Now:
What I want:
try this one?
table {
border-left: 15px solid #548dd4;
border-spacing: 0px;}
The problem is caused by the fact that borders meet at an angle so unless you remove the border from the top you cannot get straight 'joins'.
As an alternative, you could add extra padding-left to the cell and use an inset box-shadow like so.
table {
border-collapse: separate;
border-spacing: 5px;
margin: 1rem;
text-align: center;
}
table td {
width: 50px;
border-color: black;
border-width: 1px;
border-style: solid;
padding: 50px;
padding-left: 65px;
position: relative;
}
table td {
box-shadow: inset 15px 0 0 lightblue;
}
<table class="shadow">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
i have a table in asp.net web the code is as under
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
style is as under
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
now i want two different tables which is displayed in parallel but different table the formatting also will be different
one table displays here in web page and the second table displays here on the web
how can i do that.
(1) side-by-side tables:
Add float:left to your table.gridtable { css.
(2) gap between them:
Add margin: 0px 2px to table.gridtable { css. This will give a gap of 2 pixels.
See this fiddle: http://jsfiddle.net/8kKhL/1/
Note: Make sure the cumulative widths of your tables do not exceed the page width to avoid ugly horizontal scroll or wrapping.
I need to make a css class for a table created from CMS with tinyMCE so it will look like one below.
http://i.stack.imgur.com/0xcdT.png
Everything is pretty trivial except that dashed vertical delimeter with cirles. Actually having no idea how can I do it.
Here's what I have atm. Just a dashed line.
http://i.stack.imgur.com/Wp6M6.png
table.testclass {width: 100%; font-size: 1.3em; -webkit-border-vertical-spacing: 1px; -webkit-border-horizontal-spacing: 0px;}
.testclass tr:first-child td:first-child{border:0px; }
.testclass tr:first-child td:last-child{border: 0px;}
.testclass td{ height: 50px; border-bottom: 1px; border-top: 1px; border-color: black; border-style: solid; vertical-align: middle;}
.testclass tr td:first-child {text-align: right; border-left: 1px solid black; padding-right: 0px; border-right: 1px dashed rgba(0, 0, 0, 0.33) !important; width: 33%; padding-right: 25px; }
.testclass tr td:last-child {text-align: left;border-right: 1px solid black; padding-left: 25px;}
Here's HTML generated:
<table class="testclass" border="0">
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>assdava</td>
<td>zxcv234vbzx</td>
</tr>
<tr>
<td>23dfasdfadq2</td>
<td>sdfWFASDF</td>
</tr>
</tbody>
</table>
Here is a way entirely using CSS and pseudo elements. Can't speak to how cross-compatible it is, but you should experiment and see if it is flexible enough for you (based on the CSS you used, with assigned heights and such on the td elements, it would work in functioning browsers).
See the fiddle
Relevant code:
.testclass, .testclass td {
position:relative; /* allows proper positioning of absolute elements */
}
.testclass tr td:first-child:before {
content:'';
position:absolute;
right:1px;
top:18px; /* positions it at the top of the circle */
width:1px;
height:100px; /* whatever you want (here is td height * 2).. but has bearing on other code */
border-right:1px dashed #555;
}
.testclass tr td:first-child:after {
content:'';
position:absolute;
right:-7px; /* width of circle/2 */
top:18px; /* height of td - height of circle/2 */
height:14px;
width:14px;
border-radius:50%; /* don't forget vendor prefixes -- makes it a circle */
background:#fff;
z-index:2; /* puts it on top of the vertical dashed line */
border:1px dashed #666;
}
/* this one is the final circle below the entire table */
.testclass:after {
content:'';
position:absolute;
left:33%; /* width of the left-most td element */
margin-left:-9px;/* width of circle/2 */
bottom:-75px; /* height of td/2 - height of :after element */
height:14px;
width:14px;
border-radius:50%;
background:#fff;
z-index:2;
border:1px dashed #666;
}
Understandable if this isn't a method you can use. for something that would work in older browsers, you would really need to use different HTML markup. You could also, if needed, use an image for the circle (which would mean border-radius wasn't necessary). I didn't vendor prefix or anything... only tested in chrome.
I tried to add comments to the measurements to explain how they were derived. I don't think I used any magic numbers.
I want to use CSS to set a color of the outer border of the table ...
Then the inner cells would have different border color ...
I created something like this :
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
Any one knows how to get that fixed with border-width:1px ?
I would acheive this by using adjacent selectors, like so:
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
http://jsfiddle.net/JaF5h/36/
Try this:
tbody { display:block; margin: -1px; }
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td{
border-top: 0;
}
https://jsfiddle.net/o5ar81xg/
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
#tableDiv {
margin-left: 40px;
margin-right: 40px;
border: 2px solid brown;
background-color: white;
}
table {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: brown;
}
td, th {
background-color: #e7e1d3;
padding: 10px 25px 10px 25px;
margin: 0px;
}
Try the following it worked for me:
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}