我一直在尝试设计一个类似 
的表格
正如您在截取的代码中看到的，表格行彼此并不相邻。表行将自身置于上面的表行之下。我应该添加或更改什么以使它们像图片中的那样并排放置？
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 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>最佳答案
你应该添加一个 rowspan到最左栏 <td rowspan="4" class="roomId room-type room-type-container">
检查代码片段。
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 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>关于html - 如何将表格行并排放置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41266012/