I have a HTML table where I must set the overall width and want to make sure the label column doesn't get too wide.
It works as expected in Firefox 4, but IE 9 seems to completely ignore the with property.
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
th.caption { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>
<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>
</body>
</html>
Add <!DOCTYPE html> as the very first line to get Standards Mode (not directly related to your problem, but you should definitely do it unless you like IE9 pretending to be IE5 - Quirks Mode).
Set the overall width of the table on table instead of th.caption.
See: http://jsbin.com/icafo3
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
table { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>
<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>
</body>
</html>
Related
I am trying to send an email using my python code. which generates the following html and send using python.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
<tr><td>p</td><td>q</td><td>r</td></tr>
</table>
</body>
</html>
This shows really nice table in browser.. However in outlook I don't see style sheet applied for table.
I wish to design a table with single row and 2 columns. When I click on the value in cell A1, I want its description to be displayed in A2.For example if A1 contains B,A2 would display Bat,only when I click on B. What is the easiest way to achieve this using HTML coding?
If you are willing to try javascript you can try this out.
// will check the answer closest to clue and show it in the next td
$(".clue").on("click", function(){
// get the answer 'Bat' in this case.
var answer = $(this).closest("tr").find(".answer").attr("data-id");
// put 'Bat' in the next td with the class answer.
$(this).closest("tr").find(".answer").html(answer);
});
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
width: 100px;
}
.clue:hover {
cursor: pointer;
background: #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tr>
<td class="clue">
B
</td>
<td class="answer" data-id="Bat"></td>
</tr>
</table>
If you don't need the click, and hovering is okay, you can do it without JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Hover Test</title>
<meta charset="UTF-8" />
<style>
td+td { font-size: 0; }
td:hover+td { font-size: 1em; transition: 2s; }
</style>
</head>
<body>
<h1>Hover Test</h1>
<table>
<tr> <td>B</td> <td>Bat</td> </tr>
</table>
</body>
</html>
Why do I see a red strike through in the XXX when I view the following in Firefox 55 (Windows)?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
.n { border-top: 1px solid red; }
</style>
</head>
<body>
<table>
<thead>
<tr><th>000</th><th>111</th></tr>
</thead>
<tbody>
<tr><td>AAA</td><td rowspan="2">BBB</td></tr>
<tr><td class="n">CCC</td></tr>
<tr><td>DDD</td><td rowspan="2">XXX</td></tr>
<tr><td class="n">FFF</td></tr>
<tr><td>GGG</td><td>HHH</td></tr>
</tbody>
</table>
</body>
</html>
This is a known bug in Firefox, please visit https://bug98304.bugzilla.mozilla.org/show_bug.cgi?id=608531 for more info
Extra tr at the end is causing this issue.
Try removing last
<tr></tr>
It is the (FireFox) problem. Try to change border-collapse property values from collapse to inherit;
<html>
<head>
<style type="text/css">
table { border-collapse: inherit; }
.n { border-top: 1px solid red; }
</style>
</head>
<body>
<table>
<thead>
<tr><th>000</th><th>111</th></tr>
</thead>
<tbody>
<tr><td>AAA</td><td rowspan="2">BBB</td></tr>
<tr><td class="n">CCC</td></tr>
<tr><td>DDD</td><td rowspan="2">XXX</td></tr>
<tr><td class="n">FFF</td></tr>
<tr><td>GGG</td><td>HHH</td></tr>
</tbody>
</table>
</body>
I am trying to give a left border to a table cell. It works fine in Chrome, but in Firefox and IE the border isn't displayed.
I saw in the documentation that left and right borders aren't widely supported but maybe there is a workaround or am I doing something wrong in the code.
The strange thing is that I have rounded borders in my table which have both left-borders and bottom borders and they are shown fine on each browser.
Here's the relevant code:
<tr class="Panel_Middle_Row">
<td class="Panel_Middle_Left_Cell" width="20"></td>
<td class="Panel_Middle_Middle_Cell">blablabla</td>
<td class="Panel_Middle_Right_Cell"></td>
</tr>
And the according css:
.Panel_Middle_Left_Cell {
width: 20px;
border-left-style:solid;
border-left-color:#CCC;
border-left-width:2px;
}
.Panel_Middle_Right_Cell {
width: 20px;
border-right-style:solid;
border-right-color:#CCC;
border-right-width:2px;*/
}
You can find an example here.
Your td are empty, ence they are not displayed. Add a .
Or add this to your table class : empty-cells: show;
try this:
<!DOCTYPE html>
<html>
<head>
<style>
td.Panel_Middle_Left_Cell {
width: 20px;
border-left-style:solid;
border-left-color:#CCC;
border-left-width:2px;
}
td.Panel_Middle_Right_Cell {
width: 20px;
border-right-style:solid;
border-right-color:#CCC;
border-right-width:2px;
}
</style>
</head>
<body>
<table>
<tr class="Panel_Middle_Row">
<td class="Panel_Middle_Left_Cell">jcjgcjgc</td>
<td class="Panel_Middle_Middle_Cell">blablabla</td>
<td class="Panel_Middle_Right_Cell"></td>
</tr>
</table>
</body>
</html>
This simply sets up a table and sets the width to 100% but the table does not stretch the width of the page.
Apparently it works in Firefox 4. I have been testing in Chrome 11
http://jsfiddle.net/CWNJM/
<html>
<head>
<style type="text/css">
table, th, td
{
border: 1px solid black;
border-collapse:collapse;
width: 100%;
}
</style>
</head>
<body >
<table align="center" >
<tr><td align="center" valign="middle"><img width="100%" border='0' id="main_img" src="http://example.com/EiE99"/></td></tr>
</table>
</body>
</html>
It isn't working properly in Webkit (Google Chrome dev channel). The containing element needs at least one of these two:
margin: 0;
padding: 0;
Then it works. I used body { margin: 0; padding: 0; }
Edit: Seems like padding: 0; was what was needed in that particular "jsfiddle".