I know this is a very simple question, but I somehow don't get it to work. I looked at many other questions here, but couldn't find the right answer.
How can I remove white space between two tables without setting a negative margin? I've tried the following things on the table and body without any luck:
margin:0;
padding:0;
display:block;
Here's a fiddle to test it out: http://jsfiddle.net/sznurkqo/
Thanks
DEMO
In your case, .table is having margin-bottom:20px that's why there is a space.
.table {
width: 100%;
margin-bottom: 20px;
}
remove that space and it will work.
.table {
width: 100%;
margin-bottom: 0px;
}
Related
I want to create the following table: https://fiddle.jshell.net/7zrmd2wa/
The output is good on Fiddle, but if I host it myself then it outputs this, the buttons aren't aligned. https://imgur.com/a/byaM5
I've tested it with different browsers.
I don't understand why? And how can I solve it?
Add the following and it should fix the problem. I was able to reproduce your issue when I started the code on a separate html file
#table1 td form{
display: inline;
}
or
#table1 td form{
display: table-cell;
}
Add this CSS to get vertical centering in all cells:
td {
vertical-align: middle;
}
Try add this in your stylesheet:
* {
padding: 0;
margin: 0;
border: none;
}
Try this way: jsfiddle edited
Looking at the sample, it should work unless you've got some additionnal CSS.
I have having a few problems, with what should be a simple task.
I have spent a good while trying to fix them, but no luck.
Centre the Input boxes within the div - tried this solution, (didn't work): http://jsfiddle.net/pjAHG/27/
input {
display: block;
margin: auto;
max-width: 80%;
}
Make the background image fill the full screen, only to the bottom of my timer div... if I use a solid colour, it fills the screen though :/ I have tried all the ways I can find online, but no luck.
Media query does not seem to change the size of the text/submit button.
If anyone could share some info, or help for these problems, I would be grateful.
Here is my code:
https://codepen.io/anon/pen/dVNZZO
Thanks :)
Try this
.input-group{
max-width:80%;
margin:0 auto;
}
and
#media (max-width:768px) {
.btn-lg{
display:block;
max-width:100%;
white-space:normal;
}
.lead-subtitle {
color: #dbdbdb;
text-decoration: underline;
font-size: 1em;
display:block;
}
}
here is the updated pen.
centered the form element instead of the input fields as they are
set to display: table by bootstrap anyway
this question doesn't make quite sense to me. I have added a sample image and it fills the whole bg, have a look
Bootstrap sets white-space: nowrap for the .btn class; I overwrote it for you
https://codepen.io/anon/pen/xXgPjZ
I am having a little problem with my padding in a table. I created a table and I noticed that my rows have a lot of empty text.
Thus I tried to put the padding and margin to zero but this hasn't helped to reduce the big white gap at all.
I have joined a picture of what I would like to be taken off.
If anyone has any suggestions that could help get rid of this problem and thus make the table more compact.
https://jsfiddle.net/u39fqw38/
Unfortunately I can't post the html here as it has to many Chinese characters and this is blocked by the SO filters.
tr{
height:10;
padding:0;
margin:0;
}
td{
margin:0;
padding:0;
}
Looks like the padding is coming from the <p> elements.
First of all, height:10; is invalid as it does not contain units.
To fix your problem, you can add:
table {
border-collapse: collapse;
}
td p {
margin: 0;
padding: 0;
}
Fixed JSFiddle.
Ok so I am trying to make a layout to be used with Contact Form 7. This is what I have come up with, I just feel like I could probably clean it up. Also I cant seem to remove my Submit class without breaking everything.
I want to get rid of:
.Submit {
float:right;
}
I also would like to get the columns to line up properly. I have them lined up if the screen is the right size but I would like to make this responsive if possible.
JSFiddle
Any advice would be much appreciated.
Thanks,
jFlatz
Your problem is in
.table width: 70%;
}
you left out a {, i.e.
.table {
width: 70%;
}
DEMO
You can get rid of that .Submit rule safely if you open/close the .table rule above it appropriately:
THIS...
}
.table width: 70%;
}
.Submit {
float:right;
}
Should Be...
}
.table {
width: 70%;
}
.Submit {
float:right;
}
I have a table that I've inserted buttons into the cells of. However, try as I might, I can't get rid of some whitespace that shows up between the top of the cell and the button.
Here's an example in Jsfiddle:
http://jsfiddle.net/7Bz36/1/
Where I have a simple table with a button
<table border="1">
<tr>
<td>
<button id="1"></button>
</td>
</tr>
</table>
with some css and attempts to get rid of it:
button {
height: 15px;
width: 15px;
border-radius: 0px;
margin: 0px;
white-space: none;
}
table {
border-collapse: collapse;
}
tr td {
height: 15px;
padding: 0px;
Can anyone figure out how to get rid of it? Thanks!
You are not using any text value for the button, use font-size: 0; or line-height: 0;
Demo (Font Size 0)
Demo 2 (Line Height 0)
Also id="1" is invalid, id name cannot be started with an int
Try this:
button {
height: 15px;
width: 15px;
border-radius: 0px;
display: block;
}
table, td, button {
margin: 0px;
padding: 0px;
}
This will set margins and paddings of all the elements involved to 0px; and set the button element to display: block; to get rid of some inline element white-space.
jsFiddle
It is not clear what the problem is via your jsfiddle.
Also, none is not a valid property of white-space in your CSS. Do you know what your doing, or are you just adding random styling hoping that it will work?
Anyway, your code is not properly formatted, the CSS ends in </table>, what? Also, your html is not constructed properly here, nor in the jsfiddle.
It doesn't seem you put much research into this question at all, but rather tried randomness and SO.
I'd love to help you, but I can't see the problem. It's not well explained here and it's not shown in the jsfiddle.