CODEWITHSUNDEEP
htmlcssjsp
user2268507
user2268507

Reputation:

Remove space between table columns

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>

enter image description here

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!

Upvotes: 0

Views: 710

Answers (2)

abl
abl

Reputation: 5968

  • 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

Upvotes: 0

jdiver
jdiver

Reputation: 2393

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;}

Upvotes: 1

Related Questions