I have a table with one tr & 2 tds. The 2 td's have tables. There is space between the 2 inner tables, which I don't want. Can someone suggest me how to remove this spacing.
Here is my mark up:
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
You need to set the padding of the cells themselves to 0. They do not inherit the padding of the table element.
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td style="padding-right: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td style="padding-left: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
You can simple use:
table {
border-collapse: collapse;
}
table{
border-collapse: collapse;
}
<table>
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
include cellpadding="0" cellspacing="0" in the table tag
HTML
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Fiddle Demo
Related
I wish to get table that looks like this:
Blue element is auto generated table in main table.
Problem is that i don't now how to keep columns. Best i can do is:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table class="table table-bordered">
<thead>
<th>
Date
</th>
<th>
Zm
</th>
<th>
Service
</th>
<th>
Pozition
</th>
<th >
Operation
</th>
<th >
Material Typ
</th>
<th >
Batch and weight
</th>
<th>
Output length
</th>
</thead>
<tbody>
<tr>
<td>
2021-03-28
</td>
<td>
I
</td>
<td>
<input type="text" style="width: 90px;"> <br>
<input type="text" style="width: 90px;">
</td>
<td>
1
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
2530
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
2
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
3020
</td>
</tr>
</tbody>
</table>
</body>
</html>
Styling is from another answer on the portal, but i don't now how remove space between main table and nested.
Can some one help me whit styling? I'm learning python and don't now JS
You will have to remove the padding in the columns that has a sub table and have some fixed width on the columns.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
vertical-align: top;
}
.table-inner td {
padding: 0;
}
.table-inner {
border: none;
}
.table-inner tr:first-child td {
border-top: none;
}
.table-inner tr:last-child td {
border-bottom: none;
}
.table-inner td:first-child {
border-left: none;
}
.table-inner td:last-child {
border-right: none;
}
.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
}
.no-border {
border: none;
}
.p-0 {
padding: 0 !important;
}
input[type=text] {
width: 100%;
}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th style="min-width: 120px; width: 120px">Date</th>
<th style="min-width: 80px;width: 80px">Zm</th>
<th style="min-width: 90px;width: 90px">Service</th>
<th style="min-width: 80px;width: 80px">Pozition</th>
<th style="min-width: 150px;width: 150px">Operation</th>
<th style="min-width: 150px;width: 150px">Material Typ</th>
<th style="min-width: 170px; width: 170px">Batch and weight</th>
<th style="width: auto">Output length</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-03-28</td>
<td>I</td>
<td class="p-0">
<input type="text" style="width: 90px;"><br />
<input type="text" style="width: 90px;">
</td>
<td>1</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>2530</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>3020</td>
</tr>
</tbody>
</table>
</div>
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
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
I want to align the second <table> in the <div>. The table should start from the second column of the first table. Right now, the second table with the text “1111111111111” starts from the extreme left but I wish to align it to where the textboxes start in the first table.
Here is my HTML:
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>
Set the margin-left value to 33% for the 2nd table using :nth-child(2)
table:nth-child(2) {
margin-left: 33%;
}
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>
div {
display: table; /* Display the div as a table */
}
div > table {
display: contents; /* Ignore the tables and display their contents
as if they were contents of the div */
}
div > table:last-child tr:before {
content: ''; /* Insert a pseudo-element at the beginning */
display: table-cell; /* Display it as a cell */
}
div {
display: table;
}
div > table {
display: contents;
}
div > table:last-child tr:before {
content: '';
display: table-cell;
}
<div>
<table border="1">
<caption>Title</caption>
<tr>
<td>First Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" /></td>
</tr>
</table>
<table border="1">
<tr>
<td>1111111111111</td>
</tr>
</table>
</div>
Note display: contents is not widely supported yet.
You can have a look at this code. Let me know if its working with you.
http://jsfiddle.net/FnK9D/13/
<div style="position:absolute;">
<table border="1" style="">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1" style="float:right;">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111111</td>
</tr>
</table>
</div>
The input field width is not commenly set in browsers like chrome and firefox.see my code below
<table border="1" align="left" cellpadding="0" cellspacing="0" width="25%" style="margin-top: -90px;">
<tr>
<td colspan="3"><input id="ir-box" type="checkbox"/>Only show LIVE reports</td><td></td>
</tr>
<tr>
<td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td>
</tr>
<tr>
<td colspan="4"><input id="incident-types"class="incident-type" type="text" value="All Incident types" /></td>
</tr>
<tr>
<td colspan="4"><input id="location-types"class="incident-type" type="text" value="All Location types"/></td>
</tr>
<tr>
<td colspan="2">From</td><td colspan="2">To</td>
</tr>
<tr>
<td colspan="2" width="30"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2" width="150"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td>
</tr>
<tr>
<td></td><td></td><td></td><td>{% include "buttons/go.html" %}</td>
</tr>
</table>
css.
.datefield {
padding:0;
margin:0;
width:80px;
height:20px;
}
.incident-type {
padding:0;
margin:0;
width:250px;
height:20px;
}
May i know how to resolve this compatibility.
Thanks
your problem is not in the input field, but on table scale, try out my code on demo
HTML
<div class="wrapper">
<table border="1" align="left" cellpadding="0" cellspacing="0" width="25%">
<tr>
<td colspan="3"><input id="ir-box" type="checkbox"/>Only show LIVE reports</td><td></td>
</tr>
<tr>
<td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td>
</tr>
<tr>
<td colspan="4"><input id="incident-types"class="incident-type" type="text" value="All Incident types" /></td>
</tr>
<tr>
<td colspan="4"><input id="location-types"class="incident-type" type="text" value="All Location types"/></td>
</tr>
<tr>
<td colspan="2">From</td><td colspan="2">To</td>
</tr>
<tr>
<td colspan="2" width="30"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2" width="150"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td>
</tr>
<tr>
<td></td><td></td><td></td><td>{% include "buttons/go.html" %}</td>
</tr>
</table>
</div>
CSS
.wrapper {
width: 400px;
}
.wrapper table {
width: 100%;
}
.datefield {
padding:0;
margin:0;
width:80px;
height:20px;
}
.incident-type {
padding:0;
margin:0;
width:250px;
height:20px;
}
DEMO
http://jsfiddle.net/sqJyw/3/
EXPLANATION
I added div which wrap your table and table is retched to 100%