I am all in favor of CSS based layouts, but this one I just can't figure out. With a table it is oh-so-easy:
<html>
<head><title>Three Column</title></head>
<body>
<p>Test</p>
<table style="width: 100%; border: 1px solid black; min-height: 300px;">
<tr>
<td style="border: 1px solid green;" colspan="3">Header</td>
</tr>
<tr>
<td style="border: 1px solid green; width: 150px;" rowspan="2">Left</td>
<td style="border: 1px solid yellow;">Content</td>
<td style="border: 1px solid blue; width: 200px;" rowspan="2">Right</td>
</tr>
<tr>
<td style="border: 1px solid fuchsia;">Additional stuff</td>
</tr>
<tr><td style="border: 1px solid green;" colspan="3">Footer</td></tr>
</body>
<html>
Left is fixed width
Right is fixed width
Content is liquid
Additional stuff sits beneath content
Now here is the important part: "Left" may not exist. Again this is easy with the table. Delete the column and "Content" expands. Beautiful.
I have looked through many examples (and "holy grails") of liquid and table less three-column CSS based layouts, but I have not found one which is not using some kind of margin-left for the middle column ("Content"). Any margin-left will suck once "Left" is gone as "Content" will just stay at it's place.
I'm just about to switch to old school table based layout for this problem, so I'm hoping someone has some idea - I don't care about excess markup, wrappers and the like, I would just like to know how to solve this with plain CSS. Btw: look at how easy equal height columns are...
Cheers
PS: No CSS3 please
body {
width: 600px;
}
.left {
float: left;
width: 200px;
}
.center {
float: right;
width: 100%;
}
.right {
float: right;
width: 200px;
}
this should let the .center expand to the full width when left is removed
Related
I have a regular table with table rows that are generated with ngFor loop.. the issue is the following: Even though I have set css of table-wrapper to max-height: 450px and overflow-y: auto; , it doesnt matter, that div gets the scroll needed, but my entire page, entire body element, has the height of that table with every single row... Anyone had similar issue?
.table-wrapper {
display: block;
max-height: 450px;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
<div class="table-wrapper">
<!-- I'm reproducing the DOM after Angular ng for -->
<table>
<tr *ngFor="let s of something">
<td>Some content</td>
</tr>
</table>
</div>
Html
<table style='width: 150px; border: 1px solid black;'>
<tr>
<td>blablabla</td>
<td>blablabla</td>
</tr>
<tr>
<td>abcd</td>
<td>abcd</td>
</tr>
</table>
I want to change the table width to 600px. I couldnt figure out the selector for changing width.
Please help , i am learning css.
Just do like this
HTML
<table style='width: 150px; border: 1px solid black;'>
<tr>
<td>blablabla</td>
<td>blablabla</td>
</tr>
<tr>
<td>abcd</td>
<td>abcd</td>
</tr>
</table>
CSS
table {
width:600px!important;
border:1px solid black;
}
Change the width value in the style attribute.
<table style="width: 600px;">
yields a table that is 600px wide.
You should use like this -
table [style]{width:600px !important}
It is specified inline right there in your code.
<table style='width: 150px; border: 1px solid black;'>
change this
<table style='width: 600px; border: 1px solid black;'>
Alternatively
Use a class in your table and use the selector in your css file.
<table class="tbl" style='width: 150px; border: 1px solid black;'>
CSS
.tbl{width:600px!important} /*!important override inline css 150px*/
If you can remove the inline css used in table, you need not to use !important like this-
<table class='tbl'>
CSS
.tbl{width:600px}
To those who width !important didnt work, try also changing min-width and setting it to !important.
.myCssTable {
width: 80% !important;
min-width: 80% !important;
}
I've found some very strange behaviour with Chrome with respect to the following CSS...
CSS:
table.addressBody {
width: 100%;
min-width: 100%;
}
table.addressBody tr td {
padding: 4px;
width: 40%;
min-width: 40%;
max-width: 40%;
border: none;
vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
background-color: White;
border: 2px solid #aaa;
}
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
text-align: center;
}
HTML:
<div class="fitWidth centre">
<strong>Mr Smith</strong><br />
29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
<tr>
<td class="left">
<select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
</td>
<td class="centre" style="border: none;"> </td>
<td class="right">
<select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
</td>
</tr>
<tr>
<td class="leftShadow" colspan="2">
<img src="../img/other/bottomShadowLt.png" alt="Shadow" />
</td>
<td class="rightShadow">
<img src="../img/other/bottomShadowRt.png" alt="Shadow" />
</td>
</tr>
</table>
(Fiddle)
The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).
I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).
Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?
-- EDIT --
But you did specify that it have a bottom border:
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
border-bottom: 2px solid #aaa; <---
text-align: center;
}
As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.
I'm trying to sort out quite a challenging issue. I have a header of a website into which three random picture will be generated. The collection of picture is quite huge and so the aspect ratio vary from picture to picture.
The header of the web is in fact a responsive table with one row and three table cell:
.header table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
display: table;
}
Now what I'd like to do is to:
Keep the table responsive (i.e. if possible avoid defining width and height with pixels and use rather "%") => like this:
.header td {
display: table-cell;
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
}
...but at the same time, to fit three random picture into to the table cell without changing the size or aspect ratio of the table cell... It means that some pictures will be cropped.
I was experimenting with the css3 attribute contain:
.header td {...
background-repeat: no-repeat;
background-size: contain;
...}
<table class="header">
<tr>
<td class="header" style="background-image:url('img/random1.jpg')">
</td>
<td class="header" style="background-image:url('img/random2.jpg')">
</td>
<td class="header" style="background-image:url('img/random3.jpg')">
</td>
</tr>
</table>
But it this attribute doesn't seem to be friend with the td tag...
Anyways, I'm not actually insisting on the "table" solution. Does anyone have any kind of work around how to:
Make three pictures in a "row" responsible
Fit them into frames which don't change their proportion
?
Pure CSS solution is preferable but I guess it might not be possible.
First of all you need some kind of a width and hight relation, otherwhise you woun't get a responsive behavior.
So i did some dirty hack ^^
I insert a image into each td that gives me the relation, then i hide it with opacity 0 (won't work in ie8). Now if you want to insert some other contetn then work with positions and seperate containers.
HTML:
<table class="header">
<tr>
<td class="header" style="background-image:url('img/1.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/2.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/3.jpg')">
<img src="img/1.jpg" />
</td>
</tr>
</table>
then i altered your CSS:
table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
}
td {
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
display: inline-block;
}
td img {
opacity: 0;
width: 100%;
height: auto;
}
It's looking kind a wierd becaus im using a table layout and then i overwrite the tabel display behavior (display: inline-block), but im missing some backround informations so i decided to use exact yout html.
Here you can see the result JS Fiddle
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.