I've temporarily inherited the responsibility to look after the website front end to our project as our web maintainer has just left and there isn't a replacement yet (and I'm a summer student anyway, so I'm off soon too...). I'm not very experienced with HTML/CSS/etc, and I'm having some problems getting a table formatted the way the bosses would like it. The table HTML/CSS (cut down as much as I think I can) is as follows:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
text-align: center;
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="title-details">
<h5>Details</h5>
</div>
<div class="details">
<table class="center">
<tr>
<th class="details-column-left">Title</th>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The text in the table (that is, the header cells text and the standard cells text) is generated server-side based on a database, so the values in them can be quite long or quite short (with a reasonable maximum length). The bosses want it as follows:
The two columns must be justified against each other in the middle, with a small space inbetween.
The table should expand so that all the text in each cell is on the same row.
The title ("Details") should always be centered between the two columns, no matter what the ratio of widths are (as they will normally be about 60:40).
I think I've managed to capture 1 and 2 okay - this table should expand if you add longer th/td s, and it should likewise get smaller if you remove them - but I'm struggling with number 3. I'm just not sure how to do it at all. I've tried using a <caption>, but that didnt help - it's still centered above the entire table, not centered above the column split.
So, I'd appreciate any help getting the table to look 'right'. The only expected browser is apparently Firefox, versions 2 through 3.5 (although pushing 3.5 over 2 mostly). I apologise if I've missed any important information - please just ask and I'll add it.
EDIT:
Screenshot (red lines just for marking centre, not actually on table IRL):
The Solution
Its a bit tricky, but you could do this:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="details">
<table class="center">
<tr><td> </td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td> </td></tr>
<tr>
<th class="details-column-left">Title</th>
<td width="1"> </td>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td> </td>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td> </td>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td> </td>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td> </td>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td> </td>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
it's, not really clean and tidy, but it should work out just fine
greetz
Related
I made a simple table with HTML and CSS, however, the items don't display evenly when you resize your browser.
Screenshot:
As you can see, there is a lot of empty space.
How can I made it so these three rows evenly display across the div box no matter how the user resizes the browser?
I made a jsfiddle:
https://jsfiddle.net/5nm9m9pL/ (looks fine until your stretch the browser)
Code:
HTML
<div class="bet-ids" id="bet-ids">
<table>
<tr>
<th>Username</th>
<th>ID</th>
<th>Profit</th>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>232</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>523</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>4352</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>5234</td>
<td>+0.32423</td>
</tr>
</table>
</div>
CSS:
.bet-ids {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
background-color: white;
}
If by "lots of white space" you mean you want to center it, then you can just add margin: auto to both the table and the div, since your div has a fixed width of 60%
Otherwise if you mean that you want to stretch out the table, then obviously you can't have a width of 60%;
.bet-ids {
height: auto;
padding: 20px;
width: 60%;
margin:auto;
font-family: Helvetica Neue;
color: black;
background-color: white;
}
table {
margin: auto;
}
<div class="bet-ids" id="bet-ids">
<table>
<tr>
<th>Username</th>
<th>ID</th>
<th>Profit</th>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>232</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>523</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>4352</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>5234</td>
<td>+0.32423</td>
</tr>
</table>
</div>
Just add .bet-ids table {width: 100%;} to your CSS: Tables set their width by their content unless you tell them otherwise.
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
I've made a table to act as a frame to lay my website out on but when I set the width of it to 100% and put a background on it I have an edge on the right hand side that won't fill.
Checkout my website linked to my profile and click on the altwebsite 2 link for what im getting.
Here is the code:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3">
</th>
</tr>
<tr id="menu" colspan="3">
<td>
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol">
</td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol">
</td>
<td id="footer" colspan="3">
</td>
</tr>
</table>
and the css:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
table {
text-align: center;
border-width: 0;
border-style: none;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 100%;
}
I'am trying to keep it all in a separate stylesheet.
Any help would be brilliant thanks
your id="header" and id="menu" [colspan] is set to 3, but your id="secondrow" has four <td>
Maybe you want this:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3"></th>
</tr>
<tr id="menu">
<td colspan="3">
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol"></td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol"></td>
</tr>
<tr id="footer" >
<td colspan="3"></td>
</tr>
</table>
Try
table-layout:fixed;
for your table. I think this should work.
Try to put the attribute width="100%" in the table tag. This sometimes helps even when the css is set to 100% width.
ALSO:
I recreated the same basic code you used, and it was working fine on my machine so my guess is that you have some sort of surrounding div or tag that the table is taking up 100% of.
First things first i want to say thank you for all the replies, really appreciated.
And yeh i had 4 columns with a colspan of 3 thought i set it to another row. For all those table haters out there it helps me visualise the layout.
And thanks again for the help
Add this for your class. It worked for me
tbody, tr {
display: block;
width: 100%;
}
how to give css for getting the page as follows in the same div. am having the data in the following way with more sub parts as in the second phase.
abcde
a production productions
limited
total
jackson
b productions productions
limited
the code am using is as follwos.
css
.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
margin:0 10px 0 0;
word-wrap:break-word;
}
.text_right22 {
width: 20%;
float:left;
text-align:center;
}
.text_right23 {
width: 55%;
float:left;
}
html as
<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div>
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>
but it is not working the data is clashing if there are more sub parts
it would be easier if you use tables with rowspan ..and css can be used to adjust the width and margins of the cells here is the code
<!DOCTYPE html>
<html>
<body>
<table >
<tr>
<td rowspan="9">total</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>abcde</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>jackson</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
</table>
</body>
</html>
I am trying to implement "the unseen column" responsive table technique by assigning a class to a specific column that I can hide if the browser is too narrow.
Truncated dummy html example:
<!doctype html>
<html>
<head>
<style>
table {
width:100%;
background-color:#000;
border-spacing: 1px;
}
table tr {
background-color:#fff;
}
table tr:nth-child(2n+1) {
background-color: #ccc;
}
table tr.Title
{
color:#fff;
background-color:#0e228c;
}
table tr.ColumnHeadings
{
background-color:#e4e0d4;
}
#media only screen and (max-width: 1024px) {
.VolumeCell {display:none;}
}
</style>
</head>
<body>
<table>
<tr class="Title">
<th colspan="6">Stock Prices</th>
</tr>
<tr class="ColumnHeadings">
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th class="VolumeCell">Volume</th>
</tr>
<tr>
<td>AAC</td>
<td>Austrailian Agricultural Company Ltd</td>
<td>$1.39</td>
<td>-0.01 </td>
<td>-0.36%</td>
<td class="VolumeCell">9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>Ardent Liesure Grp.</td>
<td>$1.15</td>
<td>+0.02 </td>
<td>1.32%</td>
<td class="VolumeCell">56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>Ausenco Ltd.</td>
<td>$4.00</td>
<td>-0.04 </td>
<td>-.99%</td>
<td class="VolumeCell">90,641</td>
</tr>
</table>
</body>
</html>
This is all fine and dandy, except there is a single pixel border or space remaining on the far right of the table in some browsers, specifically Chrome 26. I've tried tweaking the border-collapse and border on many of the table elements in the media query. I've also tried setting negative margins to account for the pixel. Being the anal-retentive person I am, I can't let it go, but I would prefer not to use jQuery to solve this problem.
So how can I account for the missing column?
In case one has similar problem, but for colspan not expanding the whole row, in which case caption makes no sense.
A simple trick is to not hide desired columns with display: none;, but rather do
width: 0px;
This way column will still exist for colspan, all though not visible.
You can't modify the colspan attribute from CSS. If you really needed to change the value, you would have to modify the DOM.
However, instead of the "Title" class that you are using to encompass all the columns, you can use a <caption> element which does exactly what you want. It effectively is the title of the table. See http://www.quackit.com/html_5/tags/html_caption_tag.cfm
Here is a modified version of your markup that uses the caption element. When resized in Chrome it behaves how you would like.
table {
width:100%;
background-color:#000;
border-spacing: 1px;
}
table tr {
background-color:#fff;
}
table tr:nth-child(2n+1) {
background-color: #ccc;
}
caption
{
color:#fff;
background-color:#0e228c;
}
table tr.ColumnHeadings
{
background-color:#e4e0d4;
}
#media screen and (max-width: 1024px) {
.VolumeCell {display:none;}
}
<table>
<caption>
Stock Prices
</caption>
<tr class="ColumnHeadings">
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th class="VolumeCell">Volume</th>
</tr>
<tr>
<td>AAC</td>
<td>Austrailian Agricultural Company Ltd</td>
<td>$1.39</td>
<td>-0.01 </td>
<td>-0.36%</td>
<td class="VolumeCell">9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>Ardent Liesure Grp.</td>
<td>$1.15</td>
<td>+0.02 </td>
<td>1.32%</td>
<td class="VolumeCell">56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>Ausenco Ltd.</td>
<td>$4.00</td>
<td>-0.04 </td>
<td>-.99%</td>
<td class="VolumeCell">90,641</td>
</tr>
</table>