I need a header that is width:100% and has 3 columns with background images in the 1st and 3rd column:
This solution needs to be cross-browser compatible.
First column is a background image and is 50% width (not including width of caption)
Second column is the caption. This has no background (transparent). It's width should not be any greater than it's contents.
Third column is same as first column.
Using a table this takes 2 seconds: http://jsfiddle.net/aLeyS/
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td>Caption</td>
<td></td>
</tr>
table {
width: 100%;
}
table td:first-child, table td:last-child {
width: 50%;
background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
padding: 0 10px;
font-size: 30px;
}
Without a table this seems to be much trickier.
I've tried using set percentage widths on DIVs inside the parent div, but it always ends up giving the center column more width than it needs, or forcing the caption to wrap if it's not enough percentage.
Again, the center column (caption) should not have any width greater than its content, and it's background needs to be transparent (not white).
You can fix this by setting display:table-cell on the divs. I've updated your jsFiddle.
HTML
<div class='bg'></div>
<div class='caption'>Caption</div>
<div class='bg'></div>
CSS
div {
display: table-cell;
}
div.bg {
width: 50%;
background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
div.caption {
padding: 0 10px;
font-size: 30px;
text-transform: uppercase;
}
Related
I have a page which contains a table. On the same page, there is a footer and side bar. I've manipulated the table such that the width is how I like it, however I cannot seem to use the same method for height.
This is what my page currently looks like:
There are many more table items that continue to go down, however as you can see, the items are being cut off by the footer. When I set the height to an explicit value such as 300px I get the effect that I am looking for:
where there is a scrollbar. The problem with this is that it is not dynamic. For example, if I make the window size larger vertically, the table height is not increased with it. I've tried using % values such as 80% but it does not seem to affect anything. I want to be able to resize the window and have the height of the table increase/decrease with the resize so that it fits over the whole screen except the footer. How can I achieve this?
EDIT
Here is my source code (ReactJS):
HTML
<table className='task-table'>
<tbody>
<tr className='tasks-header'>
<th>Store</th>
<th>Product</th>
<th>Size</th>
<th>Profile</th>
<th>Proxies</th>
<th>Status</th>
<th>Actions</th>
</tr>
{this.renderTaskData()}
</tbody>
</table>
SASS
.task-table {
margin-left: 85px;
margin-top: 30px;
border-spacing: 0 10px;
width: calc(100% - 107px);
user-select: none;
display: block;
overflow-y: auto;
overflow-x: hidden;
height: 300px;
tbody {
display: table;
width: 100%;
}
}
.tasks-header {
font-family: 'Muli', sans-serif;
font-size: 12px;
font-weight: $extra-bold;
color: $text-light;
letter-spacing: 1px;
text-align: left;
th {
padding-left: 36px;
}
}
Would you like to share your source code? Meanwhile, perhaps you should try nesting the table in a div since divs are block-level elements and then control the size of the div with % or vh. Your table should reflow according to the height of this container div.
I am trying to get divs that are contained within table cells (tr, td format) to scale with the responsive table sizing. This is my current code:
<--Styling-->
table {
border: 3px solid;
width: 30%;
margin-top: 50px;
box-shadow: 10px 10px 5px grey;
table-layout: fixed;
}
table td {
width: 12.5%;
padding-bottom: 12.5%;
}
.piece-image {
position: absolute;
width: 100%;
height: auto;
}
<--HTML-->
<tr>
<td>
<div class="piece-image">
<img src="/rk_wht.png/">
</div>
</td>
</tr>
EDIT: I'm using position:absolute so that the divs sit within the td without effect the size of the cell, any other way and the divs seem to turn the cells from squares into rectangles. I am making a chessboard with this layout.
For some reason, the div containing the image wont resize with the responsive table cells, which resize great and stay squares. The end result is a chessboard with 60x60 px images in the image element. Not sure if maybe images can't get smaller past a certain size, or what is keeping the div from being responsive.
You should try to do
position:relative
I have a table that has a lot of columns and I need the columns to be the same width, so the table total width is bigger than page width, and that's fine because the browser shows the horizontal scrollbar. What's I can't get around is that, while left and top padding are ok, the right padding is not working, there's no space between table right end and the browser frame.
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
table {
width: 200%;
padding: 10px 0px 10px 0px;
background-color: #800000;
}
td {
background-color: #ffa500;
}
Here's a fiddle
As also mentioned in the answer by Umar A., You have used padding as padding: 10px 0px 10px 0px; That means, padding top and bottom is 10px and padding left and right is 0px; Use it as
padding:10px if you want it on all sides.
But, here is the example mentioned, it appears that you do not want padding. You actually require margin-right to be applied as whitespace on the right side of the table. Even if you put a value of margin-right, it will not have effect.
It happens so, because since the layout width is > 100%, element + margin-right extends beyond viewport now, and complete viewport width is consumed by table. Make view port less than 100% and margins are present. You gave your table a width of 200%. This is 200% of what? Entire page body. So, that means, you want table to be 200% of its parent container. Now, stuff like margin is applied to an element with comparison to its surrounding elements like parent container. But towards the right side, element size extends beyond container size. So, properties like margin do not have any visual effect. You can see it in snippet below. I have wrapped the table in a div to show application of margin-right.
div{
overflow:auto;
border:7px solid black;
}
table {
width: 80%;
margin-right:150px;
background-color: #800000;
display:inline-block;
}
td {
background-color: #ffa500;
}
<div>
<table>
<thead></thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>
</table>
</div>
But when you bring width of table to less than 100%, margin-right will start to apply itself in comparison to its surrounding elements. Because now, width of table + margin-right < width of document body, which is 100% of window viewport by default. So, the effect that you want to achieve can be created by wrapping table in a block level element like div, and allowing it to take expanse of div. Give it relative positioning and then define that it should be placed 5px from right side. If you specify left also, left will override right.
Another reference
div{
overflow:auto;
position:relative;
right:5px !important;
height:100%;
}
table {
width: 200%;
background-color: #800000;
}
td {
background-color: #ffa500;
}
<div>
<table>
<thead></thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</tbody>
</table>
</div>
As a general rule of thumb, think of padding as inward-facing spacing, and margin as outward-facing spacing.
That being said, the table element will not apply margin-right if the table's width is set to 100%, so I would recommend wrapping the table in a div with margin-right: 10px; for example.
Update:
Here's a working fiddle. If you're trying to simulate a wide table, remember a table will take all the available width, no need to set it to width: 200%; as that will give you unexpected results.
The css syntax for padding shorthand property is as follows:
padding: top right bottom left;
And you set it as follows:
padding: 10px 0px 10px 0px;
Which means:
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
It's normal, thus, that your table behaves like that.
If you check your fiddle with the inspector of your browser you have this result:
You can see that the body has 8px of margin.
And the table...
...has padding left and right set to 0px.
PS: Zoom to view the images well, or click on it.
Setting the width to 200% will not get clear results as per Johnny Kutnowski, which is correct.
Also if you rely on Browser's scroll, then even if you put the table inside a div, it will exceed and stick to the corners of your screen.
try this code if its acceptable to have a div which has a scroll if the table width exceeds.
Since you mentioned you have many columns:
<div class="container">
<table>
<tr><td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr><td>D</td><td>E</td><td>F</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr><td>G</td><td>H</td><td>I</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
<td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td>
</tr>
</table>
</div>
table {
width: 100%;
padding: 10px 0px 10px 0px;
background-color: #800000;
}
td {
background-color: #ffa500;
min-width: 50px !important;
}
.container {
padding-right: 100px !important;
overflow: auto;
}
Try this JsFiddle
You can not set padding to a table element with css. Only to td like
table td {padding: 10px;}
try using only padding-right:12px;
i think this will work
I have the following table:
<table>
<tbody>
<tr>
<td colspan="2">
<img src="http://www.sherv.net/cm/emoticons/cats/cat-headphones-smiley-emoticon.gif" />
<img src="http://www.beaukit.com/catgrpbl.jpg" />
</td>
</tr>
</tbody>
</table>
and the following CSS:
table {
width: 40%;
background-color:grey;
text-align: center;
margin-bottom: 20px;
}
img {
max-width: 100%;
margin: 0 0 0.8em 0;
max-height: 800px !important;
width: auto !important;
height: auto;
}
See Jsfiddle
What I want is that the pictures in the cell fill its width if they are bigger than the cell itself. In case the pictures are smaller, they should keep maintain their native width expressed via max-width. This seems to work well in Chrome, but when I try it in firefox the bigger pictures stretch the width of the cell.
While, if I change the width of the images to: width: 100% !important;, the smaller picture are streched to fill the cell (see table.two).
How can I solve the issue?
try adding
table {
table-layout:fixed;
}
Table cells don't behave like block elements, their widths and heights are defined by the content inside them. From the I.E. documentation:
auto: Default. Column width is set by the widest unbreakable content in the column cells.
fixed: Table and column widths are set either by the sum of the widths on the col objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.
You have use width auti !important which you should not be to
table tr, table tr td{
width:100%
}
table tr td a{
width:100%;
display:block;
}
img {
width: 100%;
}
Check on Fiddle
I want to create a squared table 9x9, width and height should be 100%, and each cell should be 11.11% height and width. I could do it with below code but when the text inside the cell is too large the cell grows down with it. I don't want that. I just simply want the text to be hidden. Preserve the size of the table is my priority ;)
This is what I wrote:
<div class="full_screen">
<table border="1" class="full_width full_height">
<tr class="cell_row">
<td class="cell">long long long long long text</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
<td class="cell">6</td>
<td class="cell">7</td>
<td class="cell">8</td>
<td class="cell">9</td>
</tr>
... other 8 rows and its cells are similar...
the CSS
body {
font-size: 9px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: rgba(0,0,0,0);
height: 100%;
}
div.full_screen {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cell_row {
width: 100%;
height: 11%;
}
.cell {
width: 11%;
/*height:100%;*/ /*cell height should be always 11% the height of the hole table*/
margin: 0px;
padding: 0px;
word-break: break-all;
}
How can I clip the content of the cell so cell's height will be always 11% (100%/9 =11.11%) of the table?
You have several problem here.
First, tables are no designed to work that way, they expand horizontally, not vertically, so they will never respect a height:11% per row.
Second, TR styles are ignored, so you can safely remove them.
Third, TD's ignore height for the same reason explained on the first point.
BUT, there is a workaround to the third point, you can use line-height to force a TD height or a nested element (ie DIV) with proper height. But that stills leaves you with a problem, no way to get the height as a 11% of the total document/window height.
What you can do is use some JavaScript to update the TD height (using the workaround explained above) on page load (and update on resize).
You can add
table-layout:fixed;
word-wrap:break-word;
to your table class. It will ensure that your td width will not exceed given %. It will automatically wrap your content appropriately.
As per I can see it can be fixed using following two way:
You can add font-size: 11px; .cell class
Are you getting this data from back-end or if you are displaying text using JSP or something. If you know how many letters you have to display you can get substring and append ... (ellipse). Like you string will be long long long ...
If your application allows you.