Table Design Css - html

Question

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>

Answer 1

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