I'm trying to give a table a left margin, and set the width of the table plus its margin to 100% of the containing div.
Normally I'd do this with width: 100% and box-style: border-box, but this doesn't seem to be working on a table.
Here's my CSS:
table {
width: 100%;
margin-left: 2em;
border: 1px solid black;
box-sizing: border-box;
display: table; /* tried adding this but doesn't seem to help */
}
You can see the problem here in a JSFiddle: http://jsfiddle.net/7C66d/
I can see it in Chrome, Firefox and Safari.
I think you are confused, you use padding with border-box, not margin.
http://jsfiddle.net/7C66d/4/
HTML
<div id="wrapper">
<table>
<tbody>
<tr><td>why is this table</td><td>not border-box</td></tr>
</tbody>
</table>
</div>
CSS
#wrapper {
width: 100%;
padding-left: 2em;
box-sizing: border-box;
}
table {
width: 100%;
border: 1px solid black;
display: table;
}
If you don't want a wrapper, you can use display:block as it will set the width to 100% by default.
Code:
table {
margin-left: 2em;
border: 1px solid black;
display: block;
}
Related
How to remove this gap or merge the borders? Because the lengths are inconsistent
box1 and box2 are 100px, box3 is 200px but their lengths are inconsistent because border...
so how do their length are consistent?
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.
Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.
main {
font-size: 0;
}
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div><!--
--><div class="shortBox">box2</div><!--
--><div class="longBox">box3</div>
</main>
The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.
watch this magic:
<main>
<div class="shortBox">box1</div><div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
Notice that first 2 divs are NOT divided with new line.
Then in CSS add this extra 2px like this:
.longBox {
width: 202px;
}
I have simple html:
<div class="other-album">
<img src="https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg" />
</div>
with css:
.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
}
It looks perfect. But if I zoom it in browser I see strange margin between image and its border. And place of that margin depends on zoom degree
https://jsfiddle.net/ishayahu/d51zjrkp/1/
You need to set the box-sizing property to your image.
.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
box-sizing: border-box; // solves your issue
}
Or if the anchor is already a display inline-block you may need to add font-size: 0;
To be frank, I have no idea why that happens or how to stop it from happening in this case. But I found a workaround (at least for chrome) - Don't use <img>, set background to the <a> instead!
<div class="other-album">
</div>
.other-album a {
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
display: block;
background-image: url("https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg");
background-size: 100% 100%;
}
Fiddle: https://jsfiddle.net/oj7cf021/4/
I have the same code in both Plunker and JSFiddle:
Plunker
JSFiddle
As you can see, the link borders around the images are wrong in both cases within JSFiddle, but they are proper in Plunker.
Is this a problem with JSFiddle? If so, is there some CSS I can use to fix it, without breaking it elsewhere?
Here is the code. HTML:
.clearfix::after {
content: "";
clear: both;
display: table;
}
.one {
border: solid 2px gray;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
float: left;
}
.one:hover {
border-color: #FF9900;
}
.two {
border: solid 2px gray;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
display: inline-block;
}
.two:hover {
border-color: #FF9900;
}
<h3>Problem One - with float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<img src="https://en.js.cx/gallery/img6-thumb.jpg">
<img src="https://en.js.cx/gallery/img5-thumb.jpg">
<div class="clearfix"></div>
<h3>Problem Two - without float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<img src="https://en.js.cx/gallery/img6-thumb.jpg">
<img src="https://en.js.cx/gallery/img5-thumb.jpg">
stender's answer is the best, use always em unit:
.one img, .two img {
max-width: 100%;
}
because JSFiddle added border. If you inspect code you will see:
*, ::after, ::before {
box-sizing: border-box;
}
I want to use a container to wrap a table so that it can scroll horizontally on mobile screens:
* {
box-sizing: border-box;
}
body {
padding: 10px;
margin: 0px;
}
.table-wrapper {
width: calc(100% + 20px);
overflow: auto;
margin-left: -10px;
margin-right: -10px;
padding: 0 10px;
}
table caption {
text-align: left;
padding: 5px 5px;
background: black;
color: white;
}
table { /* for illustration purposes */
width: 1000px;
border: 1px solid black;
}
<div class="table-wrapper">
<table>
<caption>title of the table</caption>
<thead>
<tr>
<td>Date</td>
<td>Away</td>
<td>Pts</td>
<td>Home</td>
<td>Pts</td>
<td>Match</td>
</tr>
</thead>
</table>
</div>
To make it clear that the table scrolls horizontally, I've used negative margins on the sides of the .table-wrapper so that the table butts up against the right edge of the screen (run the code snippet to see it in action). Then I've padded the sides of the .table-wrapper so that there's a comfortable space again when you've scrolled all the way to the left or right edge of the table.
However, while this padding manifests as desired on the left edge, it doesn't show up on the right edge (because the .table-wrapper is only 100% of the screen width). This seems to be the case across browsers.
Is there a CSS-only fix so that a padding appears on the right edge of the table only when you scroll all the way to the right?
Try this:
body {
margin: 0;
}
.table-wrapper {
overflow: auto;
padding: 0 10px;
}
table {
display: inline-table; /*key*/
width: 1000px;
border: 1px solid black;
}
table caption {
text-align: left;
padding: 5px 5px;
background: black;
color: white;
}
<div class="table-wrapper">
<table>
<caption>title of the table</caption>
<thead>
<tr>
<td>Date</td>
<td>Away</td>
<td>Pts</td>
<td>Home</td>
<td>Pts</td>
<td>Match</td>
</tr>
</thead>
</table>
</div>
I'm currently stuck on an design issue that has had me scratching my head for a bit too long.
I have a two-column layout with one column for content (left) and a side bar that lists some sports venues (right) and this column's content exceeds that of the content column.
Basically what I'm looking to achieve is to make the content column match the left hand column.
Much like the one I quickly did up over on Codepen http://codepen.io/anon/pen/iLJAe
Any advice on how to do this would be greatly appreciated.
Thanking you in advance
Stu :)
Here what I have in my style.css for the two columns.
style.css
.content {
border: 1px solid #e8e8e8;
float: left;
margin: 5em 0 0;
padding: 1em;
height: 100%;
}
.sidebar {
border: 1px solid #e8e8e8;
float: left;
margin: 5em -0.1em 0;
padding: 1em;
height: 100%;
}
You can use css display: table; property.
First put the two divs in a wrapper (act as a parent div for both)
Like:
<div id="#wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
Then in your css, use display: table to the wrapper div and display:table-cell; to the column divs (this will make the both divs behave like <td> in a table) to get them to same height.
Like:
.wrapper{
height: 100%;
width: 100%;
display: table;
float:left;
}
.content {
border: 1px solid #e8e8e8;
margin: 5em 0 0;
padding: 1em;
height: 100%;
background: red; /* for test */
display: table-cell;
}
.sidebar {
border: 1px solid #e8e8e8;
margin: 5em -0.1em 0;
padding: 1em;
height: 100%;
background: blue; /* for test */
display: table-cell;
}
WORKING SAMPLE