I have a table and I want horizontal borders on the rows, this works fine in real browsers but in IE it just doesn't show, here is my CSS and an image of what is happening. How can I fix this?
Screenshot
CSS
.defaultTableStyle {
border-collapse: collapse;
text-align: left;
font-size: 12px;
width: 100%;
}
.defaultTableStyle th {
background: #eee;
}
.defaultTableStyle th, .defaultTableStyle td {
border-top: 1px solid #ccc;
padding: 6px 8px;
position: relative;
text-align: left;
vertical-align: top;
white-space: nowrap;
}
HTML
<table class="defaultTableStyle" id="resultsTable">
<tr>
<th></th>
<th>Date</th>
<th>Success Rate</th>
<th>Coverage</th>
<th>Duration</th>
</tr>
<tr style="" data-result-id="3362" data-successrate="100" data-coverage="2" class="resultDataContainer">
<td><span class=""><i class="icon-ok"></i></span></td>
<td>27/02/2014 09:16:29</td>
<td>100%</td>
<td>2%</td>
<td>1 sec</td>
</tr>
<tr style="" data-result-id="3361" data-successrate="100" data-coverage="2" class="resultDataContainer">
<td><span class=""><i class="icon-ok"></i></span></td>
<td>27/02/2014 09:15:28</td>
<td>100%</td>
<td>2%</td>
<td>1 sec</td>
</tr>
Should work with adding border-bottom as well with the existing css
.defaultTableStyle th, .defaultTableStyle td {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 6px 8px;
position: relative;
text-align: left;
vertical-align: top;
white-space: nowrap;
}
I suggest removing position:relative, in part because it doesn't do anything for a cell and in part from pure IE-fear (it does weird things with positioning).
In addition to that, try Binita's answer. Instead of two shorthand declarations, though, try:
border: 1px solid #ccc;
border-width: 1px 0;
So here you go add border-bottom:1px solid #ccc; to the TD jsfiddle.net/HarishBoke/3fRub
For me this worked:
<table cellspacing="0" and cellpadding="0"> ... </table>
From here.
Check if your IE Zoom is set to 100%. Spent time searching for a solution when I noticed that I am working on 80% zoom.
Only now as I type this answer I found the comment above pointing to this issue.
Related
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>
I have an issue. I have a table made with pure HTML code, here is it:
<table id="calendarTable">
<tr>
<th id="tableHeader" colspan=7></th>
</tr>
<tr>
<th>Dom</th>
<th>Seg</th>
<th>Ter</th>
<th>Qua</th>
<th>Qui</th>
<th>Sex</th>
<th>Sáb</th>
</tr>
<tbody id="tableBody"></tbody>
<tr>
<td colspan=7>
<p>
<form id="dateChooser" name="dateChooser">
<select name="chooseMonth" onChange="populateTable(this.form)">
<option selected>Janeiro
<option>Fevereiro
<option>Março
<option>Abril
<option>Maio
<option>Junho
<option>Julho
<option>Agosto
<option>Setembro
<option>Outubro
<option>Novembro
<option>Dezembro
</select>
<select name="chooseYear" onChange="populateTable(this.form)">
</select>
</form>
</p>
</td>
</tr>
</table>
Here is my CSS:
#calendarTable {
text-align: center;
width: 80%;
height: 100%;
color: #18B6E6;
border-color: #18B6E6;
border: solid 1px;
border-radius: 20px;
}
#calendarTable td {
border: solid 1px;
border-radius: 4px;
}
#calendarTable th {
border: solid 1px;
font-weight: 700;
}
I want to round the borders using only CSS, I just tried using the border-radius property but my table is not changing borders.
Anyone have a tip for me?
Thanks in advance!
Here's a simplified table with border radius applied. The trick is to set the left border of the cell rather than the table itself. It'll work with or without a thead and I've annotated the css to show what I'm doing.
/*
* First normalise some of the attributes
*/
table td,
table th {
padding: .5rem;
text-align: left;
vertical-align: top;
}
/*
* Add the border, set border spacing etc
* The left width is 0 so cell border can be applied without doubling up.
*/
.table-bordered {
border: 1px solid silver;
border-left-width: 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 1rem;
}
/*
* Add the border to table cell/header
*/
.table-bordered td,
.table-bordered th {
border-top: 1px solid silver;
border-left: 1px solid silver;
}
/*
* Remove the top border from the first header/cell
*/
.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
border-top-width: 0;
}
/*
* Set the border radius for the first header/cell
*/
.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
border-top-left-radius: 1rem;
}
/*
* Set the border radius for the last header/cell
*/
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
border-bottom-left-radius: 1rem;
}
<table class="table-bordered">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
As others have said, this is the code that should give the look you want.
Code
#RoundedTable {
border: 1px solid black;
border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
border: 1px solid gray;
border-radius: 10px;
padding: 3px;
}
<table id="RoundedTable">
<tr><th>Table header</th><th>Another header cell</th></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
</table>
Caveat
For this to work, though, you need to make sure that border-collapse is set to separate instead of collapse for your table. Otherwise, neither the radius for the cells nor the radius for the whole table will work.
So look through the other CSS that may be affecting your table. If you find border-collapse: collapse; anywhere, that's the problem.
#calendarTable{
border-radius:20px;
}
DEMO
Remove the border attribute on the table. It is still supported in browsers, but it is removed from HTML5 specification. The effect that attribute makes is probably not what you want anyways.
If you want border around each cell in your table just specify that in CSS and include border-radius there as well.
I.e.
#calendarTable td { border: solid 1px; border-radius: 4px; }
If you just want border around the whole table, use the same css on table selector:
#calendarTable { border: solid 1px; border-radius: 4px; }
border-radius seems to work both on table and td elements, with or without the border attribute on table.
You must have some other CSS rules coming into play.
table {
border: 1px solid blue;
border-radius: 10px;
}
table td, table th {
border: 1px solid gray;
border-radius: 10px;
padding: 5px;
}
<table border=1>
<tr>
<th>Table header...</th>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
</table>
My question is what html and css features should I research before making tictactoe.
I'm currently using a HTML table with CSS with ugly X and O characters:
My CSS:
table tr td {
border: 1px solid;
}
My HTML:
<table>
<tr>
<td>O</td><td></td><td></td>
</tr>
<tr>
<td></td><td>X</td><td></td>
</tr>
<tr>
<td></td><td></td><td>X</td>
</tr>
</table>
Give your tds a fixed width and height, and set the table's borders to collapse:
table {
border-collapse: collapse;
}
td {
border: 5px solid #000;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
You should also look into border-radius.
Here's the fiddle, but the rest is up to you.
How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray -- or "grey" for you all in England. ;)
UPDATE: Not concerned with the bottom border of the table getting overwritten -- I'm hoping to eliminate on the sides where the border is gray.
Here is my code I'm working with and a jsfiddle.net page for your convience ;)
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
Set border-collapse:separate to your table, and add the border to the td's instead of the tr's:
http://jsfiddle.net/ptriek/uJ5zN/2/
At this point, #ptriek's solution seems to be the one that better addresses your question but, just for reference, here's a workaround using a <div> to wrap things up. This solution also keeps the last <tr>'s boarder intact and might come in handy in other situations.
Fiddle: http://jsfiddle.net/uJ5zN/4/
HTML
<div class="wrapper">
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
</tr>
</table>
</div>
CSS
.wrapper
{
border: 4px solid #000;
width: 400px;
}
table {
width: 400px;
}
table tr{
border-bottom: 4px solid #CCC;
}
One way would be to use the CSS last-child selector as follows:
table {
border: 4px solid #000;
width: 400px;
}
table tr {
border-bottom: 4px solid #CCC;
}
table tr:last-child {
border-bottom: 4px solid #000;
}
I have large URL(without spaces) in one of my Table(html table element) cell which resize table. I do not want to resize table, what property should I set to break URL into new line?
HTML
<table class="ui-grid" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>Statistic (Last 50 conversions)</caption>
<tbody><tr>
<th scope="col">Date</th>
<th scope="col">Result</th>
<th scope="col">Api</th>
<th scope="col">IP</th>
<th scope="col">Source</th>
</tr><tr>
<td style="width:200px;">12/16/2011 3:23:59 PM</td>
<td align="center" style="width:50px;">True</td>
<td align="center" style="width:100px;">Web2Pdf</td>
<td align="center" style="width:100px;">::1</td>
<td style="width:200px;">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.html?i_url=http%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-c&i_name=Patriots%20%20vs%20Redskins&i_venue_name=Gillette%20Stadium%20&i_venue_address=Foxborough%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
CSS
.ui-grid { width: 100%; margin: 5px 0 10px 0; border: solid 1px #eeeeee; border-collapse: collapse; }
.ui-grid td { padding: 2px; border: solid 1px #eeeeee; }
.ui-grid td b { font-weight: bold; }
.ui-grid th { padding: 4px 2px; color: #fff; background: #000000; border-left: solid 1px #eeeeee; text-align: center; }
.ui-grid .alt { background: #fcfcfc; }
.ui-grid .pgr { background: #424242; }
.ui-grid .pgr table { margin: 5px 0; }
.ui-grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.ui-grid .pgr a { color: #666; text-decoration: none; }
.ui-grid .pgr a:hover { color: #000; text-decoration: none; }
Add the following to your css
table-layout:fixed
word-wrap:break-word
The following site has a good walk through of this
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
i modified your code a little and this is what works for me hopefully it will help you
<html>
<div id="wrap">
<div id="content-primary">
<table class="table" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>
Statistic (Last 50 conversions)
</caption><tbody>
<tr>
<th scope="col">Date</th><th scope="col">Result</th><th scope="col">Api</th><th scope="col">IP</th><th scope="col">Source</th>
</tr>
<tr>
<td style="width:100px">12/16/2011 3:23:59 PM</td><td align="center" style="width:50px;">True</td>
<td style="width:100px">Web2Pdf</td>
<td style="width:100px">::1</td>
<td style="width:100px">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.htmli_url=ht%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
</div>
</div>
</html>
<style type="text/css" media="screen,print,projection">
#import '/css/lab.css';
#wrap {
width:60em;
margin:2em auto;
}
#content-primary {
float:left;
width:60%;
}
#content-secondary {
float:right;
width:36%;
}
table {
width:100%;
border:1px solid #f00;
word-wrap:break-word;
}
th,
td {
vertical-align:top;
text-align:left;
}
</style>
The most practical approach is to add the tag <wbr> after each acceptable break point, such as “/”, “?”, and “&” (maybe also “=”). This tag has been supported by browsers since the early days; it is not included in any HTML specification (though it is proposed to be standardized in HTML5), but it works practically always and has no know drawbacks.
Since this is about a URL in text, the breaks should appear at natural points of division, not arbitrarily. Various style guides (like The Chicago Manual of Style) have their own recommendations, but the simple break point rules mentioned above should be acceptable on all accounts and normally suffice.
There’s some more info on my page on word division in HTML and related matters.
You can try several things:
add the CSS3 property word-wrap: break-word;
You can put a div inside your table cells. Nothing within that div will stretch out the table cell.
max-width css property
Surround the URL in a containing div inside the td. Apply word-wrap:break-word; width:200px to the div container. The div container is for the benefit of IE. In Chrome, for instance, the styles can be applied directly to the td.
word-wrap is non-standard, however, it has excellent browser support, including IE6+.
Here is an example fiddle.