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.
Related
How to align Table Header and columns in the same row without resizing to next line in HTML ?? anyone please help me. ?
You need to add class "table-responsive" to the upper div of table tag. By using this when your columns are more than screen size it will start scrolling. And you won't face any issue as you described.
For more details, Refer this link --> https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h
Hope this will help you.
If we used * white-space: nowrap* it will not move to next line.
sample CSS code:
td, th {
white-space: nowrap;
overflow: hidden;
text-align: center;
padding: 10px;
text-align: left;
font-size: 18px;
}
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 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;
}
I have image wrapped in a link. The link adds extra padding in the bottom (Please see the red area in the attached image).
How can I remove it? I have tried to set the padding: 0; and margin:0 and also I have tried display:inline-block, but it does not solve it.
HTML:
<img src="http://i50.tinypic.com/2poy3kl.jpg" />
CSS:
a{
background: red;
padding: 0;
}
JS Fiddle:
http://jsfiddle.net/D6Ak8/
Use display: block; for the img tag:
a img {
display: block;
}
Updated Fiddle: http://jsfiddle.net/D6Ak8/1/
Display Block is your solution
js fiddle
http://jsfiddle.net/D6Ak8/4/
Add vertical-align:bottom to your image. This way you will keep your inline display.
try
img{border:none;}
...............
I haven't used forms alot so Im not sure whats going on here.
Im trying to position a text input inline with a button but it doesnt seem to work. You can see what Im doing here:
http://jsfiddle.net/gagalug/BEBAH/
Thanks.
Add this line to your style:
img, input[type=image] {vertical-align: bottom;}
This will prevent baseline issues on images and image-inputs. Solves your problem instantly.
You know, more people really should know about this. Even the guy who writes a site as big as QuirksMode is ignorant of this fact.
Add
input { vertical-align: middle; }
There are various ways.
Positioning relative to the parent div and position absolute to the child.
vertical-align: middle; for both input
Hey i think you want this
option you just define your vertical-align:top;
#text{
height: 40px;
vertical-align: top;
}
live demo http://jsfiddle.net/BEBAH/4/
Modify your CSS as below.
div{
border: 1px solid black;
width: 500px;
height: 50px;
float:left;
}
#text{
height: 40px;
top: 0px;
float:left;
}