This question already has answers here:
How to remove unwanted space between rows and columns in table?
(14 answers)
Closed 6 years ago.
I have a form that has input text in cells that are 100% of the cell. I have also collapsed borders and set spacing to 0px. I still see a gap between cells, well actually inputs. How can I remove these gaps between inputs? I'm trying to loosely mimic a spreadsheet.
The Code (https://jsfiddle.net/djyk8927/
):
#requestorTable{
border-collapse:collapse;
border-spacing:0px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
border:1px solid #919295;
}
<table id='requestorTable'>
<tr>
<td>
<input type='text' id='item1' name='item1'>
</td>
<td>
<input type='text' id='qty1' name='qty1'>
</td>
<td>
<input type='text' id='price1' name='price1'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item2' name='item2'>
</td>
<td>
<input type='text' id='qty2' name='qty2'>
</td>
<td>
<input type='text' id='price2' name='price2'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item3' name='item3'>
</td>
<td>
<input type='text' id='qty3' name='qty3'>
</td>
<td>
<input type='text' id='price3' name='price3'>
</td>
</tr>
</table>
You need to remove the padding from the cells (table data )
td {
padding: 0px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #919295;
}
table{
border-collapse:collapse;
border-spacing:0px;
}
td {
padding: 0px;
}
<table>
<tr>
<td>
<input type='text' id='item1' name='item1'>
</td>
<td>
<input type='text' id='qty1' name='qty1'>
</td>
<td>
<input type='text' id='price1' name='price1'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item2' name='item2'>
</td>
<td>
<input type='text' id='qty2' name='qty2'>
</td>
<td>
<input type='text' id='price2' name='price2'>
</td>
</tr>
<tr>
<td>
<input type='text' id='item3' name='item3'>
</td>
<td>
<input type='text' id='qty3' name='qty3'>
</td>
<td>
<input type='text' id='price3' name='price3'>
</td>
</tr>
</table>
Related
I'm trying to create a "register" page in HTML and I made the table to the center. But when I moved the table to the center there was a huge gap between 's.
I tried "cellspacing" but it doesn't work since im working with HTML5.
I also tried "border-spacing:0px;" but it doesn't work either.
I'm using latest version of Chrome and Sublime Text
Code:
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 650px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
Sometime when any style issue is there the reason can be style of parent control. In this case Table is nested inside Form control, so need to change style of form control first,after changing style of form position has change and for space little change in padding of table.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 650px;
padding: 50px;
}
form {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:20%;
width: 80%;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
Are you looking for this result?
Edit
removed height: 650px; from table.table
The height for each row was too high because You set the height of the table to a specific value [in your case 650px] and row heights were evenly distributed.
The solution is either to remove the height property or adjust the height according to your need.
Please note, this will not guarantee browser compatibility. It will be good to go with proven CSS frameworks like bootstrap to achieve the same result with responsiveness and browser compatibility.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td width="20%">
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
In your css code, you have fixed the height = 600px, which actually takes control of the inner size of the table and stretches table to become 600px in size. To use border-spacing, you can just remove the height of table and update the value of border-spacing, then it will show you the actual spacing that you want to use in it.
I have updated your code below, just run and enjoy ;)
<!DOCTYPE html>
<html>
<style type="text/css">
body{
background-color:#8F3985;
}
table.tablo{
background-color:#07BEB8;
margin-left:auto;
margin-right: auto;
width:600px;
border-spacing: 5px;
}
</style>
<head>
<title></title>
</head>
<body>
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
</body>
</html>
These properties should work.
table {
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
tbody, tr {
width: 100%;
}
table.tablo, table.tablo * {
box-sizing: border-box;
}
table.tablo {
width: 600px;
margin-right: auto;
margin-left: auto;
background-color: #07beb8;
}
table.tablo td {
width: 50%;
vertical-align: top;
padding: 0; /* change in whitespace you like */
}
table.tablo td:first-child {
width: 100%;
}
and use for the header
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle
Here there is a small example of my page. I need to disable all input fields but the scrollbar. This works perfectly on Chrome and Firefox, but not with IE.
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset disabled>
<table>
<thead>
<tr><th>test</th></tr>
</thead>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
Any suggestion?
Maybe like this?
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
</tbody>
</table>
</fieldset>
Or using pointer-events (still, user can tab through the inputs, but that can be prevented with tabindex="-1", but then again, why not just add disabled)
fieldset tbody {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
fieldset tbody input {
pointer-events: none;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</fieldset>
Or use an extra div
fieldset div {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<div>
<table disabled>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</div>
</fieldset>
I suggest wrapping the fieldset in an extra div and apply your styles there.
IE seems to disable the scrollbar functionality on disabled elements.
.box {
display: inline-block;
height: 80px; overflow-y: scroll;
}
<div class="box">
<fieldset disabled>
<table>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
</div>
I am currently working on a website for my business, from scratch using html5, css and javascript.
I have several table's I want to be styled individually e.g diff colours sizes etc.
I have tried to give them each their own class and I have done the table.table1 for my css - for all 3 but only one of the css is working, for all 3 tables it seems... where am I going wrong?
<form name="htmlform" method="post" target="taxshop#hotmail" action="html_form_send.php">
<table class="contact" width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
The CSS I have for this table is as follows:
table.contact tr, td {
border: 1px solid #ffffff;
border-collapse: collapse;
color:#000000;
background-color: #ffffff;
font-size: 1em;
margin: 0;
margin-bottom: 22px;
padding: 4px;
font-style: normal;
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.25em;
border-bottom-color: #ffffff;
border-radius: 0px;
}
table.contact, td {
padding: 5px;
text-align: left;
}
table.contact label{
display:inline-block;
width:100px;
margin-right:10px;
text-align:right;
}
You had a mistake in a first row,
https://jsfiddle.net/yvvcspha/1/
table.contact tr, td {
}
This selector means that youre applying style to ;tr inside table.concat, and to all other td on the page, since comma separates selectors.
If you want to apply style only to td inside table.concat, you should use. table.contact td.
table.contact tr, table.contact td {
}
This will be the right way to do it.
Also, consider learinig more about CSS and HTML5 basics since it seems like you're lacking some basic knowlege about their synthax and way it works.
This series of articles (the beginer part) might end up being extrimely helpfull to you.
Given this example, try making your window smaller such that the size of the example is squished.
div {
padding: 1em;
background: #2424c6
}
table {
width: 100%;
}
input {
width: 150px;
}
<div>
<table>
<tr>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
</div>
You will note that the textboxes (correctly) do not wrap to new lines as they are in individual <td>s.
However, the containing div, as denoted by the blue colour, does not completely wrap the table.
How can I make the containing div fully contain the child table?
Add display:table to the wrapping div.
div {
padding: 1em;
background: #2424c6;
display: table;
}
table {
width: 100%;
}
input {
width: 150px;
}
<div>
<table>
<tr>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
</div>