Essentially what I want is a table, with one row, 5 cells... The first / left cell should be left justfied, the last / right cell should be right justified, and the middle 3 cells need to be centered with equal amounts of spacing between each cell. The table itself is "100% width, so that is where the spacing between cells would come from.
How would I write this (using html / css)? "table" tags or "divs" etc are both valid, I don't really mind which approach is taken as long as the end result looks correct.
Edit:
The problem is the spacing; the table itself isn't an issue, but simply setting the alignment on the cells will not work correctly; the free space between the cells is not 100% divided equally between the cells.
I also don't want to specify cell width as the content is dynamic and there is no way to know before hand how much width is needed.
HTML only version
<table>
<tr>
<td width="20%"></td>
<td width="20%" align="center"></td>
<td width="20%" align="center"></td>
<td width="20%" align="center"></td>
<td width="20%" align="right"></td>
</tr>
</table>
CSS Version
<table>
<tr>
<td style="width:20%;"></td>
<td style="width:20%; text-align:center"></td>
<td style="width:20%; text-align:center"></td>
<td style="width:20%; text-align:center"></td>
<td style="width:20%; text-align:right"></td>
</tr>
</table>
If you are using a table, assign unique ids to each cell and then use css to justify as required, e.g.
HTML:
<td id="firstcell">...</td>
<td id="secondcell">...</td>
<td id="thirdcell">...</td>
<td id="fourthcell">...</td>
<td id="fifthcell">...</td>
CSS:
table {table-layout:fixed;} /* ensure the widths are absolutely fixed at the specified width*/
td{ width: 20%;} /* allocate space evenly between all 5 cells */
td#firstcell {text-align:left;}
td#secondcell, td#thirdcell, td#fourthcell {text-align:center;}
td#fifthcell {text-align:right;}
td
{
text-align:center;
}
td:first-child
{
text-align:left;
}
td:last-child
{
text-align:right;
}
<style type="text/css">
.five_columns {
width: 100%;
}
.five_columns > div {
width: 20%;
float: left;
text-align: center;
overflow: auto;
}
.five_columns > div:first-child {
text-align: left;
}
.five_columns > div:last-child {
text-align: right;
}
</style>
<div class="five_columns">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
overflow: auto is set because if you strictly want the width to be the same there really isn't much you can do (as far as I know) other than force scrollbars on anything that's too long.
Related
I want that a table column uses the minimum of place but after a certain width, it should wrap.
Here is what I have:
<table id="#table">
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
<style>
#table{
width: 100%;
}
.min {
width: 1%;
white-space: nowrap;
}
</style>
This makes the column use only the place which it needs but it it ets too long, it will make the table endless longer and I want to set the maximum of the allowed space.
Edit:
I think that with js it would be possible to calculate the width and change the css but I would prefer a solution without javascript or jquery.
Edit 2: I forgot to mention that the table has a width of 100%. So if I follow the given answer, the table cell has its autowidth (which is too wide) and a max-width so if the text is short, the td has a white space which I do not want.
Edit 3: Here is an image which explains better than me.
#billTable{
width:100%;
}
#numberTd{
text-align: center;
width:18%;
}
#weightTd{
text-align: center;
width:20%;
}
#nameTd{
text-align: left;
width: 1%;
white-space: nowrap;
}
#kgPriceTd{
text-align: right;
width:20%;
}
#priceTd {
text-align: right;
}
<div style="width:550px;">
<table>
<tr>
<th id='numberTd'>Packetzahl</th>
<th id='weightTd'>Kg</th>
<th id='nameTd'>Artikel</th>
<th id='kgPriceTd'>CHF / Kg</th>
<th id='priceTd' colspan="2">Total</th>
</tr>
<tr>
<td id='numberTd'>1</td>
<td id='weightTd'>0.688</td>
<td id='nameTd' class='min'>Siedfleisch</td>
<td id='kgPriceTd'>44.00</td>
<td id='priceTd'>8.2</td>
</tr>
</table>
</div>
You can control max width of an element by using max-width
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
.min {
max-width: 200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
You can apply width in percentages for the flexible columns, space it out so it looks good or make your table not 100%
Use the CSS property "max-width". I've attached an example with a border that shows this in use.
table, td {
border:1px solid #555;
border-collapse:collapse;
}
.min {
max-width:200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
I need flexible lenght of first two columns when i'm entering text, but fixed lenght of third column and that table doesn't leave div element (but doesn't move the div). Third column is on right side of the div element. In the first column to fit all text entered, second how many can fit. Second column field can ends with "...". Sorry for my bad english. code - jsfiddle.net/17s8gz3L
My code:
<div>
<table border="1">
<tr>
<td>textbssanssadsadasdacccccccccccc</td>
<td>textsasas</td>
<td>text</td>
</tr>
<tr >
<td>textsadasdadadsads</td>
<td>text</td>
<td>textsasasd</td>
</tr>
</table>
<div>
table{
width:100%;
overflow:hidden;
}
td:last-of-type {
float:right;
}
td{
overflow:hidden;
white-space:nowrap;
}
div{
border:1px solid red;
width:60%;
}
Adding classes and styling those should do the trick.
Can't remember the exact CSS attributes but you should do something like:
In html:
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
<tr>
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
<tr>
In css:
div{
border:1px solid red;
width:60%;
}
div.col1{
width:auto;
}
div.col2{
width:auto;
}
div.col3{
width:20%;
//change the 20% to whatever static width you need use % or px, i recommend using %.
}
I need to reduce the whitespace between Name: and the "Bob",similary between Age: and "20".
How can I accomplish using css.
fiddle:
http://jsfiddle.net/QfN3f/2/
html:
<table class="table">
<tr class="table-row">
<td class="table-col">Name:</td>
<td class="table-col">Bob</td>
<td class="table-col">Age:</td>
<td class="table-col">20</td>
</tr>
</table>
css:
.table {
width:100%
}
I'd add a class to your "labels"
<table class="table">
<tr class="table-row">
<td class="table-col label">Name:</td>
<td class="table-col">Bob</td>
<td class="table-col label">Age:</td>
<td class="table-col">20</td>
</tr>
</table>
CSS
.table {
width:100%
}
.label {width:50px; font-weight:bold;}
http://jsfiddle.net/QfN3f/5/
You could also use n-th child.
tr td:nth-child(odd) {width:50px; font-weight:bold;}
http://jsfiddle.net/QfN3f/6/
I would also re-consider the appropriatness of a table here as it may not actually be tabular data. Maybe consider a definition list.
If you must use a table for this, I'd suggest (assuming that your label td elements are always the odd-numbered elements):
td:nth-child(odd) {
text-align: right;
}
td:nth-child(even) {
text-align: left;
}
JS Fiddle demo.
But, I'd strongly suggest moving to more semantic HTML, such as a definition list:
<dl>
<dt>Name</dt>
<dd>Bob</dd>
<dt>Age</dt>
<dd>20</dd>
</dl>
With the CSS:
dt, dd {
display: inline-block; /* allows the elements to be side-by-side */
width: 5em;
margin: 0; /* removes the default margins */
padding: 0.2em 0; /* aesthetics, but sets/overrides the defaults */
}
dt {
text-align: right; /* to move the 'label' towards the 'value' */
}
dd {
text-align: left;
text-indent: 0.5em; /* aesthetic, gives a small separation; adjust to taste */
}
JS Fiddle demo.
The gaps are so wide because table cells will expand to take up as much space as is available. To reduce the whitespace, stop stretching the table all the way across the parent div. Simply remove width:100% from the table.
Of course, you may want to simultaneously add a min-width to the cells, so that the columns don't get too close together.
Add a % or fixed width to the column:
<td class="table-col" width="20px">Name:</td>
or
HTML
<td class="table-col name-col">Name:</td>
CSS
.name-col{
width:20px;
}
If no width per column is specific the columns width is the same for each one.
If you want to reduce to the gaps space you may also want to reduce the table width by removing width:100% and writing a fixed width or smaller one or writing a fixed width to all the columns.
Jsfiddle
You can remove width:100% and specify padding for table cells (td).
.table td {
padding: 10px
}
jsfiddle
Also if you want to customize some individual cells you can add different class to some <td class="myCustomClass"> and assign different width/padding or whatever property you want in css.
Use this html code:
<table class="table">
<tr class="table-row">
<td class="table-col-a">Name:</td>
<td class="table-col-b">Bob</td>
<td class="table-col-a">Age:</td>
<td class="table-col-b">20</td>
</tr>
</table>
And this css code:
.table-col-a{float:right;}
Also you can use paddings to make it exactly as you want.
See working jsFiddle demo
Simply modify your HTML to:
<table class="table">
<tr class="table-row">
<td class="table-cola">Name:</td>
<td class="table-colb">Bob</td>
<td class="table-cola">Age:</td>
<td class="table-colb">20</td>
</tr>
</table>
and your CSS to:
.table
{
width:100%
}
.table td
{
width: 25%;
}
.table-cola
{
text-align: right;
}
.table-colb
{
text-align: left;
}
that will yield:
I'm attempting to create an HTML table that displays a list of vehicles down the page along with columns for each hour of the day. Within each hourly column I would like to display five bars of varying colors that indicate activity over 12 minute periods. This is an abbreviated version of my latest attempt showing the first two hours:
<table>
<thead>
<tr>
<th class="mobile_column" colspan="1">Mobile Name</th>
<th class="time_column" colspan="5">00</th>
<th class="time_column" colspan="5">01</th>
</tr>
</thead>
<tr>
<td class="mobile_column">Test</td>
<td class="no_data"> </td>
<td class="ignition_off"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
</tr>
</table>
I'm using the following CSS to format each bar:
.no_data, .no_data_legend {
background-color: White;
}
.moving, .moving_legend {
background-color: Green;
}
.idling, .idling_legend {
background-color: Yellow;
}
.ignition_off, .ignition_off_legend {
background-color: Red;
}
.ignition_toggle, .ignition_toggle_legend {
background-color: Purple;
}
.no_data, .moving, .idling, .ignition_off, .ignition_toggle {
width: 5px;
height: 24px;
float: left;
display: inline-block;
padding: 0px 0px 0px 0px;
}
I'm fairly inexperienced in HTML layout but from my reading I was expecting that five of the bars should appear under each of the hourly headings and go across the page, however they all appear under the first hour and then wrap down the page.
I've posted a JSFiddle at http://jsfiddle.net/dKb6Z/2/ that contains the data for 24 hours that makes it more apparent. Any assistance including preferred alternative ways to format the data would be appreciated.
Remove
float: left;
display: inline-block;
from your CSS. It is destroying the standard table layout.
Working jsFiddle here.
Further to #winterblood's answer (sorry, unable to comment), if you are wanting to remove the padding from the cells (which I am assuming you were trying to do with the float + inline-block), you can add the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Fiddle
See this demo mate, I also added a dotted border so that you can see the 5 cells clearly, aligned under each hour. Also changed white color to grey as it's invisible on JS Fiddle default background.
Remember to include this table {border-collapse:collapse;}
Demo here: http://jsfiddle.net/Godinall/Tc2cx/1/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Two divs, one fixed width, the other, the rest
I want 2 divs side by side, where the right has a random width (this contains another 2 divs - a header with a random text and a body with a random image, all generated by JS) while the left should use the remaining width (this also contains another 2 divs - a header and a body, both containing static text only).
I currently have a solution with 3 tables that was quite simple do come up with, but as I'm recoding all my tables without strict tabular contents to CSS (yes I'm quite a few years late with this) I would prefer to have this in CSS too, if it's at all possible? After searching for a solution for quite some time it seems it may not be...
Worth noting is that the image height is always the same, also the width of every image is specified in the JS.
My current solution (with the JS and more stripped out to be as simple and clear as possible, the image is just an example and may have a width of up to 250px): My fiddle
HTML:
<table class="container" cellpadding="0">
<tr>
<td>
<table class="left">
<thead>
<tr>
<th>Text Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>This just contains text.
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="right">
<thead><tr>
<th>Image Header</th>
</tr></thead>
<tbody>
<tr>
<td>
<img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
}
table.container {
width: 500px;
background-color: #DDD;
border: 1px solid #0F0;
}
.container td {
vertical-align: top;
}
table.left {
border: 0px;
}
table.right {
border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
padding: 3px;
}
.left thead th, .right thead th {
background-color: #00F;
color: #FFF;
font-weight: bold;
text-align: left;
}
.right tbody td {
background-color: #888;
}
Please tell if you also want the JS and my unfinished CSS only solution.
Rather than js, if you use two floating divs, one containing the text and text header, one containing the image and image header, I think it should do what you want:
http://jsfiddle.net/PeyWR/10/
(I lost some of your styling, but I think the idea's there).