2
私はこのようなテーブルをデザインしようとしていました
どのようにテーブルの行を並べるのですか？
テーブルの行は隣り合っていません。テーブルの行は、上記のテーブルの行の下に配置されます。写真のように隣り合わせに追加または変更するにはどうすればよいですか？
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>
@Arminはとても簡単でした。あなたの答えをありがとう！ – Eniss