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.
Related
I'm trying to use external css to format a 3-column table with 100% width and column widths of 10%, 80%, and 10% respectively. All my td attributes work from the external stylesheet except width.
<td style="width:10%">
works in inline css, but not as an internal style or from the external stylesheet.
It will read td widths from the external css if I remove the 100% width attribute from the table, but then the width of my table changes depending on the amount of text in it.
I have tried using
table-layout: fixed;
with no success. I've also tried removing width from one column at a time with no effect. All the examples I can find use pixels instead of % widths.
Have I missed something simple about table design?
Here's the relevant part of my external css:
table.border td {
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
and here's the table's html:
<table class="border" >
<tr>
<td class="edge"> hi there</td>
<td class="center">it's me</td>
<td class="edge"> bye there</td>
</tr>
</table>
The table it gives me has a wide first column and narrow second and third columns.
Correct the CSS as follows (just removing "td" from this line: "table.border td") and it will work as expected:
table.border{
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
This is jsfiddle example: https://jsfiddle.net/r281bv1z/
Hope this may help.
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>
Ok, i have a wordpress site, i added a table and use the
white-space: no-wrap;
Since i want the table headers to stay on a single line, the table have too many headers and need to make to stay outside of the content "boundary" (that is fine with me).
The problem is that when i zoom in and out with the browser, the table change position (moves a lil bit left or right and dosnt stay centered) i center it manualy with the "margin".
Im very new to css, hope i describe the issue enough.
.dataTables_wrapper .tablepress {
white-space: nowrap;
clear: both;
margin-left: -50px;
}
.entry table {
border: 1px solid #DFDFDF;
background-color: #F9F9F9;
width: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
color: #333;
border-collapse: separate;
border-spacing: 0;
}
.tablepress {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: 1em;
border: 0;
}
Does setting a width not work?
<table>
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
table{border:1px solid #000;width:100%}
link to fiddle
It might also help if you provided a little more information, like where abouts on your page you want to put this table
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 :)
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;
}