Remove space between table columns - html

Question

I need to remove the space between the day/month/year columns in the following table.
<form action='goServlet' method='POST'>
<table style="width:1000px" style="text-align:center">
<tr style="text-align:center">
<th>City</th>
<th>Room Type</th>
<th colspan="3">Start Date</th>
<th colspan="3">End Date</th>
<th>Discount %</th>
</tr>
<c:forEach var="item" items="${discountInfo}">
<tr style="text-align:center">
<td>${item.hotelLocation}</td>
<td>${item.roomType}</td>
<td><select>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></td>
<td><select>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select></td>
<td><select>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select></td>
<td><select>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></td>
<td><select>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select></td>
<td><select>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select></td>
<td>50</td>
</tr>
</c:forEach>
</table>
</form>
Would anyone have any idea as to how I could go about doing this?
I tried using cellpadding="0" cellspacing="0" and border-collapse:collapse in <table> but it didn't change anything.
Thanks for your help!

Answer 1

You made your table with 1000px width, and you have "Start Date" and "End Date" which span 3 columns. So either remove table width <table style="width:1000px" style="text-align:center"> or another quick fix is to set td width to a small value like td {width: 10px;}

Answer 2

Remove the fixed width of the table (width = 1000px). It is going to be a problem in smaller screens and it is the cause of the space between your columns.
You have some fields which cointain more than one column (fields of type date contain 3 columns, for day, month and year). Add a class to the first cell in the field so that you can set a padding to it in order to visually separate it from other fields:
<tr>
<th>City</th>
<th>Room Type</th>
<th colspan="3">Start Date</th>
<th colspan="3">End Date</th>
<th>Discount %</th>
</tr>
<tr>
<td class="firstTDInField">Sidney</td>
<td class="firstTDInField">Single</td>
<td class="firstTDInField"><select>
<option value="01">01</option>
...
<option value="31">31</option>
</select></td>
<td><select>
<option value="01">January</option>
...
<option value="12">December</option>
</select></td>
<td><select>
<option value="2014">2014</option>
...
<option value="2019">2019</option>
</select></td>
<td class="firstTDInField"><select>
<option value="01">01</option>
...
<option value="31">31</option>
</select></td>
<td><select>
<option value="01">January</option>
...
<option value="12">December</option>
</select></td>
<td><select>
<option value="2014">2014</option>
...
<option value="2019">2019</option>
</select></td>
<td class="firstTDInField">50</td>
</tr>
th {
text-align:left;
}
th, td.firstTDInField {
padding-left: 20px;
}
See the fiddle