Adding multiple columns to a table in one row only - html

I need to make a table with multiple rows for a form.
I'm stuck with this part:
,
This is what I want:
Any help on shortening those cells would be much appreciated.


Try this one: https://jsbin.com/kekecixuda/1/edit?html,css,output
// Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main-box">
<table border=1>
<tr>
<td class="bold-text">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td>
<select class="select-aria">
<option value="">Select a cource</option>
<option value="">...</option>
<option value="">...</option>
</select>
</td>
</tr>
<tr>
<td>Select a section:</td>
<td class="td-pos">
<input type="radio" name="browser" value="a1" class="inputs-pos">1
</td>
<td class="td-pos">
<input type="radio" name="browser" value="a2" class="inputs-pos">2
</td>
<td class="td-pos">
<input type="radio" name="browser" value="a3" class="inputs-pos">3
</td>
</tr>
</table>
</div>
</body>
</html>
// CSS
* {
margin: 0;
padding: 0;
font-size: 15px;
}
.main-box {
background-color: #40b3bf;
width: 680px;
padding: 20px;
}
.bold-text {
font-weight: bold;
width: 250px;
}
.select-aria {
width: 130px;
}
table {
border-collapse: separate;
}
td {
padding: 2px;
min-width: 140px;
}
.inputs-pos {
margin: 0px 5px 0px 3px;
}
.td-pos {
padding-top: 5px;
}


You need to use colspan. Where you want one column to look like 3, set the colspan=3 so on.
<table border="1">
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>


My sketch showing some elements, very simple, just for fun:
table{border-collapse:collapse}
td{border:1px solid #000;padding:5px}
<table>
<tr>
<td colspan="4">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td colspan="3"><input type="search"></td>
</tr>
<tr>
<td>Select a section:</td>
<td><input type="radio"> 1</td>
<td><input type="radio"> 2</td>
<td><input type="radio"> 3</td>
</tr>
</table>

Related

how to prevent the tbody from overlapping with tfoot

I would like to create a html template that when print in chrome browser, the header and footer will fixed on the top and bottom of the page. The tbody will be in between of header and footer. It's height is the total height after minus header and footer. If the tbody exceed the height, it will break into next page. Now, I am having issue that when printing the html template, the tbody will overlap the tfoot and thead on the next page, as shown in these pictures. Please kindly advice. My html template is on the below github link.
.
The HTML is in my github repository. Please help to check on this link.
MyTemplate
Below is my code and my reference for dealing page break for large html table.
Reference
This is a short snippet of my code structure
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html,
body,
* {
margin: 0;
padding: 0;
}
table {
page-break-inside: auto;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
td {
page-break-inside: avoid;
page-break-after: auto
}
div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group
}
/* tbody {
display: table;
width: 100%;
table-layout: fixed;
} */
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
height: 250px;
bottom: 0;
left: 0;
text-align: left;
display: block;
}
div.divHeader {
position: fixed;
height: 100px;
top: 0;
left: 0;
display: block;
}
div.divBody {
height: calc(100% - 350px);
position: relative;
text-align: left;
margin-top: 20rem;
margin-bottom: -20rem;
page-break-after: always;
}
}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th>
<div class="divHeader" style="display: inline-block; width: 100%;">
<table style="width: 100%; text-align: left;">
<tr>
<td><img style="width: 120px; height: 120px;"
src="https://bp.doctor2u.my/assets/img/bplogo.png">
</td>
<td style="vertical-align: top; ">
<table>
<tr style="margin-left: 1 rem;">
<td colspan="2">
<a
style="font-family:Helvetica;font-weight: bold; font-size: 20pt;">
PATHOLOGY
REPORT
</a>
</td>
</tr>
<tr>
<td colspan="2">
<span>B. P. CLINICAL LAB SDN. BHD. (152314-H)</span>
</td>
</tr>
<tr>
<td>
<span>[BranchAddress] ,</span>
</td>
<td>
<span> [BranchEmail]</span>
</td>
</tr>
<tr>
<td>
<label>Tel : </label><span>[BranchTel]</span>
</td>
<td>
<label>Fax : </label><span>[BranchFax]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>GST Reg No. : </label><span>[GST]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%; text-align: left;">
<tr>
<td>
<label>Client PatientID :</label><span>[ClientId]</span>
</td>
<td colspan="2">
<label>Barcode :</label><span>[LabNo]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Patient Name :</label><span>[PatientName]</span>
</td>
<td>
<label>Age/Gender :</label><span>[Age] / [Gender]</span>
</td>
</tr>
<tr class="spaceUnder">
<td>
<label>NRIC No :</label><span>[IC]</span>
</td>
<td>
<label>Refer No :</label><span>[ReferNo]</span>
</td>
<td>
<label>Branch :</label><span>[BranchName]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Client Name :</label><span>[ClinicName]</span>
</td>
<td>
<label>Tel :</label><span>[Tel]</span>
</td>
</tr>
<tr class="spaceUnder2">
<td colspan="2">
<label>Doctor’s Name :</label><span>[DoctorName]</span>
</td>
<td>
<label>Fax:</label><span>[Fax]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Specimen :</label><span>[Specimen]</span><span>-sampled at
</span><span>[SampleDate]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Received :</label><span>[LabNo] by [ReceivedBranch]
[ReceiveDate]</span>
</td>
</tr>
</table>
<label for="" style="float: right;">Page 2 of 3</label>
<table
style="border-top: 5px solid black; width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<tr class="spaceUnder">
<th>
<label for="">TEST NAME</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="divFooter" style="display: inline-block; width: 100%; left:0px;
bottom:0px; text-align: left;">
<table style="width: 100%; margin-top: 1rem;">
<tr>
<td rowspan="7" style="width: 20%;">
<!-- [Image] -->
</td>
</tr>
<tr>
<td>
Results validated and authorised through the Laboratory information
System.
</td>
</tr>
<tr>
<td>
Results checked and authorised for release
</td>
</tr>
<tr>
<td>
Test done at B.P. Clinical Lab Sdn. Bhd. (Ipoh) 273-B Jalan Raja
Permaisuri
Bainun,
30250
Ipoh, Perak.
</td>
</tr>
<tr>
<td>
Tel: 05-2559090 Fax:05-2419226
</td>
</tr>
<tr>
<td>
Ipoh lab is a MS ISO 15189 accredited lab
</td>
</tr>
<tr>
<td>
* Not SAMM Accredited
</td>
</tr>
<tr>
<td colspan="4">
<p style=" margin-top: 1rem; text-align: center;">
For further confirmation, please
repeat test with another
fresh
specimen, if desired.
Should
you
have further enquiries, please
contact your nearest BP branch or mail us at
corpcare#bphealthcare.com
<br>
[BranchAddress], [BranchEmail]
Tel: <span>[Tel]</span>,
Fax: [Fax]
</p>
</td>
</tr>
</table>
</div>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="divBody">
<table style="width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<!-- LIPIDS STUDIES -->
<tr>
<td style="text-align: left;">
<label for=""><strong>Full Blood Count</strong></label>
</td>
</tr>
<tr>
<td style="text-align: left;">
<label for="">Total RBC</label>
</td>
<td>
<label for="">[TotalRBCResult]</label>
</td>
<td>
<label for="">[TotalRBCUnit]</label>
</td>
<td>
<label for="">[TotalRBCRange]</label>
</td>
<td>
<label for="">[TotalRBCResult2]</label>
</td>
<td>
<label for="">[TotalRBCUnit2]</label>
</td>
<td>
<label for="">[TotalRBCRange2]</label>
</td>
</tr>
<!-- More row -->
<br>
<br>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

html how to keep table columns for table in table

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>

Can't remove spaces between <td>

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>

Style Generated Table Rows

I'm trying to achieve this look for a table. I couldn't figure out how to space it like this. This is my code so far. How can i accomplish this?
<table class="table table-inverse" data-bind="foreach: todos">
<tr >
<td ><input type="checkbox" data-bind="checked: IsDone, click: $parent.updateTodo" /></td>
<td ><span data-bind="text: Description"></span></td>
<td ><small></small></td>
</tr>
</table>

Well you can check the following snippet, if you are looking for backward compatibility the following could be useful
.wrapper{padding:20px;background:blue;}
table tr td:last-child,table tr td:first-child{width:25px;}
table{width:100%;background:#fff;margin-bottom:5px}
table:last-child{margin-bottom:0;}
<div class="wrapper">
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
</div>

You can use flex-box to achieve this
body{
background:#3a9bcb;
}
table{
width:100%;
}
.flex-box {
display: flex;
margin-bottom: 5px;
padding: 10px;
background:#fff;
}
.col {
flex: 1 1;
}
.col:first-child,
.col:last-child {
flex: 0 0 30px;
}
<table>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
</table>

remove space between two td elements in a table

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