How do I put table rows next to each other?

4.3k views Asked by At

I have been trying to design a table like this

As you see in the snipped code, table rows are not next to each other. the table rows place itself under the above table row. What should I add or change to make them place next to each other like the one in the picture?

table.roomstable th {
    border-left: 0 none !important;
    background-color: #5a97ee;
    padding: 6px 8px;
    margin: 0;
    color: #fff;
    font-weight: bold;
    font-size: small;
}

table.roomstable {
    width: 100%;
}

table.roomstable tr {
}

table.roomstable th#price_highlight {
    width: 76px;
    min-width: 76px;
    background: #00357f;
    text-align: center;
}

th#price_highlight div.price-highlight-inner {
    position: relative;
    margin: 0;
    padding: 0;
}

.roomArea th.canwrap {
    white-space: normal;
}

.btnBooking-wrap .btn-acb {
    width: 100%;
    min-width: 110px;
    color: #fff !important;
    font-size: 13px !important;
}

.btnBooking-wrap .btn-acb {
    border-collapse: collapse;
    bottom: 0px;
    box-shadow: rgb(170, 170, 170) 0px 0px 3px 0px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    height: 33px;
    left: 0px;
    min-height: 0px;
    min-width: 110px;
    position: relative;
    right: 0px;
    top: 0px;
    vertical-align: middle;
    width: 121px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 60.5px 16.5px;
    transform-origin: 60.5px 16.5px;
    background: rgb(8, 150, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 13px / 19.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    padding: 5px 10px;
}

.btnBooking-wrap .btn-acb:hover {
    background-color: #003580;
}

table.roomstable td.room-type-container {
    border-right: 1px solid #5a97ee !important;
}

.bed-types-wrapper {
    margin: 16px 8px;
    line-height: 1.4;
}

.bed-types {
    background: #e5ebfb;
    padding: 5px 10px;
    border-radius: 4px;
}

.bed-types label {
    display: table;
    font-size: 13px;
}

.bed-label {
    font-weight: bold;
    vertical-align: top;
}

.bed-type-select {
    display: table-cell;
    vertical-align: top;
    padding-right: 5px;
}

.name-bed-types {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.room-options {
    margin-bottom: 13px;
    font-size: 13px;
    font-weight: lighter;
    color: #390;
    display: block;
    margin-top: 3px;
}

.included-price-tax {
    font-size: 13px;
    text-align: left;
}

.room-options-wrapper span {
    clear: left;
    /*padding-left: 0!important;*/
    padding-left: 4px!important;
}

table.roomstable td {
    border-left: 1px solid #96b2d9;
    padding: 6px;
}

.bb {
    border-bottom: 1px solid #96b2d9;
}
<div id="rooms_table" style="margin: 0;">
    <div id="available_rooms" style="margin-bottom: .5em;">
        <form autocomplete="off" id="roomsFor" name="roomsFor" action="#" method="GET">
            <div class="roomArea" id="maxHotelRoomArea">
                <div id="individualRooms" class="rtshown">
                    <table class="roomstable roomstable-long-language">
                        <thead class style="width:814px; top:0px; z-index:auto">
                            <tr id="maxhotel_table_header">
                                <th class="canwrap" style="width:273px"> Accommodation Type</th>
                                <th class="occupancy-dropdown-header" style="width: 56px;">Max</th>
                                <th id="price_highlight" class="price-figure canwrap" style="width:76px;">
                                    <div class="price-highlight-inner">
                                        Price for 1 night
                                    </div>
                                </th>
                                <th class="conditions" style="width:150px;">Your options</th>
                                <th id="number_rooms_header" class="canwrap" style="width:60px;">
                                    Quantity
                                </th>
                                <th class="cyr-header canwrap" style="width:117px;">Confirm your reservation
                                </th>
                            </tr>
                        </thead>
                        <tbody id="room_availability_container">
                            <tr>
                                <td colspan="5" style="padding:0;"></td>
                                <td id="btnBooking" rowspan="400" style="min-width: 121px; background-color: rgb(255, 255, 255);">
                                    <div class="btnBooking-wrap" style="display:block; width:121px; top:42px; padding-top:10px; z-index:auto">
                                        <div id="booking_summary" style="display:none;">
                                            DISPLAY BOOKING SUMMARY HERE
                                            <span class="rooms-count">
                                                <strong>1</strong> room selected
                                            </span>
                                            <span class="total-price">
                                                                BAM&nbsp;60
                                            </span>
                                            <span class="breakfast-included">
                                                Breakfast <strong>included</strong>
                                            </span>
                                        </div>
                                        <button class="btn-acb">Reserve</button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="room-counter-1">
                                <td class="roomId room-type room-type-container">
                                    <a name="roomId" style="display:block; position:relative; top:-50px;"></a>
                                    <div class="room-type-room-info" id="roomId"></div>
                                    <span style="display:block;">
                                                        <a href="#roomId" class="sal-gelsin">Standard Double Room</a>
                                                        <div class="bed-types bed-types-wrapper">
                                                            <label class="bed-label">Choose your bed:</label>
                                                            <!--alttaki 2 label oda isminin detaylari.-->
                                                            <label>
                                                                <div class="bed-type-select">
                                                                    <input type="radio" id="bedPreference_roomId"
                                                                           name="bedPreference_roomId"
                                                                           data-dojo-type="dijit/form/RadioButton"/>
                                                                </div>
                                                                <ul class="name-bed-types">
                                                                    <li class="bed-type">
                                                                        1 single bed
                                                                        <div class="riba-beds"
                                                                             style="font-size: 24px;"></div>
                                                                    </li>
                                                                </ul>
                                                            </label>
                                                            <label>
                                                                <div class="bed-type-select">
                                                                    <input type="radio" id="_beddPreference_roomId"
                                                                           name="beddPreference_roomId"
                                                                           data-dojo-type="dijit/form/RadioButton"/>
                                                                </div>
                                                                <ul class="name-bed-types">
                                                                    <li class="bed-type">
                                                                        1 large double bed
                                                                        <div class="riba-double-bed"
                                                                             style="font-size: 24px;"></div>
                                                                    </li>
                                                                </ul>
                                                            </label>
                                                        </div>
                                                        <span class="room-options">
                                                            <div class="room-options-wrapper">
                                                                <span><div style="zoom:0.7;" class="riba-bell"></div> name</span>
                                    <span><div style="zoom:0.7;" class="riba-air-conditioner"></div> name</span>
                                    <span><div style="zoom:0.7;" class="riba-departures"></div> name</span>
                                    <span><div style="zoom:0.7;" class="riba-family"></div> name</span>
                </div>
                </span>
                <div class="included-price-tax">
                    <strong class="included-label">Included:</strong> 17% VAT, 1BAM city tax per person per night.
                </div>
                </span>
                </td>
                <td colspan="4" style="padding:0;"></td>
                </tr>
                <tr class="room-counter-1" id="roomIdx">
                    <td class="room-max-person bb" id="roomMaxPerson">
                        2
                    </td>
                    <td class="room-price bb" id="roomPrice">
                        <span class="room-price-span">195BAM</span>
                    </td>
                    <td class="option-policy bb" id="optionPolicy">
                        <span>test</span>
                        <span>test2</span>
                    </td>
                    <td class="room-num-dropdown bb" id="roomNumDropdown">
                        <select>
                            <option value="1">1 (200BAM)</option>
                            <option value="2">2 (350BAM)</option>
                        </select>
                    </td>
                </tr>
                <tr class="room-counter-1" id="roomIdxx">
                    <td class="room-max-person bb" id="roomMaxPersonx">
                        2
                    </td>
                    <td class="room-price bb" id="roomPricex">
                        <span class="room-price-span">195BAM</span>
                    </td>
                    <td class="option-policy bb" id="optionPolicyx">
                        <span>test</span>
                        <span>test2</span>
                    </td>
                    <td class="room-num-dropdown bb" id="roomNumDropdownx">
                        <select>
                            <option value="1">1 (200BAM)</option>
                            <option value="2">2 (350BAM)</option>
                        </select>
                    </td>
                </tr>
                <tr class="room-counter-1" id="roomIdxxx">
                    <td class="room-max-person bb" id="roomMaxPersonxx">
                        2
                    </td>
                    <td class="room-price bb" id="roomPricexx">
                        <span class="room-price-span">195BAM</span>
                    </td>
                    <td class="option-policy bb" id="optionPolicyxx">
                        <span>test</span>
                        <span>test2</span>
                    </td>
                    <td class="room-num-dropdown bb" id="roomNumDropdownxx">
                        <select>
                            <option value="1">1 (200BAM)</option>
                            <option value="2">2 (350BAM)</option>
                        </select>
                    </td>
                </tr>
                </tbody>
                </table>
            </div>
    </div>
    </form>
</div>
</div>

1

There are 1 answers

1
Jasper On BEST ANSWER

You should add a rowspan to the most left column <td rowspan="4" class="roomId room-type room-type-container">

Check the code snippet.

table.roomstable th {
    border-left: 0 none !important;
    background-color: #5a97ee;
    padding: 6px 8px;
    margin: 0;
    color: #fff;
    font-weight: bold;
    font-size: small;
}

table.roomstable {
    width: 100%;
}

table.roomstable tr {
}

table.roomstable th#price_highlight {
    width: 76px;
    min-width: 76px;
    background: #00357f;
    text-align: center;
}

th#price_highlight div.price-highlight-inner {
    position: relative;
    margin: 0;
    padding: 0;
}

.roomArea th.canwrap {
    white-space: normal;
}

.btnBooking-wrap .btn-acb {
    width: 100%;
    min-width: 110px;
    color: #fff !important;
    font-size: 13px !important;
}

.btnBooking-wrap .btn-acb {
    border-collapse: collapse;
    bottom: 0px;
    box-shadow: rgb(170, 170, 170) 0px 0px 3px 0px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    height: 33px;
    left: 0px;
    min-height: 0px;
    min-width: 110px;
    position: relative;
    right: 0px;
    top: 0px;
    vertical-align: middle;
    width: 121px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 60.5px 16.5px;
    transform-origin: 60.5px 16.5px;
    background: rgb(8, 150, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 13px / 19.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    padding: 5px 10px;
}

.btnBooking-wrap .btn-acb:hover {
    background-color: #003580;
}

table.roomstable td.room-type-container {
    border-right: 1px solid #5a97ee !important;
}

.bed-types-wrapper {
    margin: 16px 8px;
    line-height: 1.4;
}

.bed-types {
    background: #e5ebfb;
    padding: 5px 10px;
    border-radius: 4px;
}

.bed-types label {
    display: table;
    font-size: 13px;
}

.bed-label {
    font-weight: bold;
    vertical-align: top;
}

.bed-type-select {
    display: table-cell;
    vertical-align: top;
    padding-right: 5px;
}

.name-bed-types {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.room-options {
    margin-bottom: 13px;
    font-size: 13px;
    font-weight: lighter;
    color: #390;
    display: block;
    margin-top: 3px;
}

.included-price-tax {
    font-size: 13px;
    text-align: left;
}

.room-options-wrapper span {
    clear: left;
    /*padding-left: 0!important;*/
    padding-left: 4px!important;
}

table.roomstable td {
    border-left: 1px solid #96b2d9;
    padding: 6px;
}

.bb {
    border-bottom: 1px solid #96b2d9;
}
<div id="rooms_table" style="margin: 0;">
    <div id="available_rooms" style="margin-bottom: .5em;">
        <form autocomplete="off" id="roomsFor" name="roomsFor" action="#" method="GET">
            <div class="roomArea" id="maxHotelRoomArea">
                <div id="individualRooms" class="rtshown">
                    <table class="roomstable roomstable-long-language">
                        <thead class style="width:814px; top:0px; z-index:auto">
                            <tr id="maxhotel_table_header">
                                <th class="canwrap" style="width:273px"> Accommodation Type</th>
                                <th class="occupancy-dropdown-header" style="width: 56px;">Max</th>
                                <th id="price_highlight" class="price-figure canwrap" style="width:76px;">
                                    <div class="price-highlight-inner">
                                        Price for 1 night
                                    </div>
                                </th>
                                <th class="conditions" style="width:150px;">Your options</th>
                                <th id="number_rooms_header" class="canwrap" style="width:60px;">
                                    Quantity
                                </th>
                                <th class="cyr-header canwrap" style="width:117px;">Confirm your reservation
                                </th>
                            </tr>
                        </thead>
                        <tbody id="room_availability_container">
                            <tr>
                                <td colspan="5" style="padding:0;"></td>
                                <td id="btnBooking" rowspan="400" style="min-width: 121px; background-color: rgb(255, 255, 255);">
                                    <div class="btnBooking-wrap" style="display:block; width:121px; top:42px; padding-top:10px; z-index:auto">
                                        <div id="booking_summary" style="display:none;">
                                            DISPLAY BOOKING SUMMARY HERE
                                            <span class="rooms-count">
                                                <strong>1</strong> room selected
                                            </span>
                                            <span class="total-price">
                                                                BAM&nbsp;60
                                            </span>
                                            <span class="breakfast-included">
                                                Breakfast <strong>included</strong>
                                            </span>
                                        </div>
                                        <button class="btn-acb">Reserve</button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="room-counter-1">
                                <td rowspan="4" class="roomId room-type room-type-container">
                                    <a name="roomId" style="display:block; position:relative; top:-50px;"></a>
                                    <div class="room-type-room-info" id="roomId"></div>
                                    <span style="display:block;">
                                                        <a href="#roomId" class="sal-gelsin">Standard Double Room</a>
                                                        <div class="bed-types bed-types-wrapper">
                                                            <label class="bed-label">Choose your bed:</label>
                                                            <!--alttaki 2 label oda isminin detaylari.-->
                                                            <label>
                                                                <div class="bed-type-select">
                                                                    <input type="radio" id="bedPreference_roomId"
                                                                           name="bedPreference_roomId"
                                                                           data-dojo-type="dijit/form/RadioButton"/>
                                                                </div>
                                                                <ul class="name-bed-types">
                                                                    <li class="bed-type">
                                                                        1 single bed
                                                                        <div class="riba-beds"
                                                                             style="font-size: 24px;"></div>
                                                                    </li>
                                                                </ul>
                                                            </label>
                                                            <label>
                                                                <div class="bed-type-select">
                                                                    <input type="radio" id="_beddPreference_roomId"
                                                                           name="beddPreference_roomId"
                                                                           data-dojo-type="dijit/form/RadioButton"/>
                                                                </div>
                                                                <ul class="name-bed-types">
                                                                    <li class="bed-type">
                                                                        1 large double bed
                                                                        <div class="riba-double-bed"
                                                                             style="font-size: 24px;"></div>
                                                                    </li>
                                                                </ul>
                                                            </label>
                                                        </div>
                                                        <span class="room-options">
                                                            <div class="room-options-wrapper">
                                                                <span><div style="zoom:0.7;" class="riba-bell"></div> name</span>
                                    <span><div style="zoom:0.7;" class="riba-air-conditioner"></div> name</span>
                                    <span><div style="zoom:0.7;" class="riba-departures"></div> name</span>
                                    <span><div style="zoom:0.7;" class="riba-family"></div> name</span>
                </div>
                </span>
                <div class="included-price-tax">
                    <strong class="included-label">Included:</strong> 17% VAT, 1BAM city tax per person per night.
                </div>
                </span>
                </td>
                <td colspan="4" style="padding:0;"></td>
                </tr>
                <tr class="room-counter-1" id="roomIdx">
                    <td class="room-max-person bb" id="roomMaxPerson">
                        2
                    </td>
                    <td class="room-price bb" id="roomPrice">
                        <span class="room-price-span">195BAM</span>
                    </td>
                    <td class="option-policy bb" id="optionPolicy">
                        <span>test</span>
                        <span>test2</span>
                    </td>
                    <td class="room-num-dropdown bb" id="roomNumDropdown">
                        <select>
                            <option value="1">1 (200BAM)</option>
                            <option value="2">2 (350BAM)</option>
                        </select>
                    </td>
                </tr>
                <tr class="room-counter-1" id="roomIdxx">
                    <td class="room-max-person bb" id="roomMaxPersonx">
                        2
                    </td>
                    <td class="room-price bb" id="roomPricex">
                        <span class="room-price-span">195BAM</span>
                    </td>
                    <td class="option-policy bb" id="optionPolicyx">
                        <span>test</span>
                        <span>test2</span>
                    </td>
                    <td class="room-num-dropdown bb" id="roomNumDropdownx">
                        <select>
                            <option value="1">1 (200BAM)</option>
                            <option value="2">2 (350BAM)</option>
                        </select>
                    </td>
                </tr>
                <tr class="room-counter-1" id="roomIdxxx">
                    <td class="room-max-person bb" id="roomMaxPersonxx">
                        2
                    </td>
                    <td class="room-price bb" id="roomPricexx">
                        <span class="room-price-span">195BAM</span>
                    </td>
                    <td class="option-policy bb" id="optionPolicyxx">
                        <span>test</span>
                        <span>test2</span>
                    </td>
                    <td class="room-num-dropdown bb" id="roomNumDropdownxx">
                        <select>
                            <option value="1">1 (200BAM)</option>
                            <option value="2">2 (350BAM)</option>
                        </select>
                    </td>
                </tr>
                </tbody>
                </table>
            </div>
    </div>
    </form>
</div>
</div>