CSSに関しては初心者ですが、3レベルのdivを中央に配置するのを手伝ってくれる人はいますか? % を使用しているため、幅が不明です。私はすでに試しましmargin: auto;たが、うまくいきませんでした。
また、テーブルのヘッダーとフッターに関する別の問題にも直面しています。<hr>コードを使用して水平線を表示しようとしました<thead>が<tbody>、期待どおりに表示されませんでした。私はすでに道に迷っています。助けてください。
jsbin で現在のコードを表示するには、ここをクリックしてください
<div style="overflow: auto; height: 100%;padding:1% 0% 0% 0.5%;margin:0 auto;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background: #E0E0E0 !important;border: 1px solid #808080;">
<div style="width:45%;margin: 0 1.5%;float:left;">
<div style="width: 100%;text-align: right !important;white-space: nowrap;">
<b>Select</b>
<select name="department" id="department" class="required" style="margin-top:0.4%; margin-right: -4px; width: 70%;">
<option class="options" value="">Please select</option>
<option class="options" value="1">Option 1</option>
<option class="options" value="2">Option 2</option>
<option class="options" value="3">Option 3</option>
<option class="options" value="4">Option 4</option>
<option class="options" value="5">Option 5</option>
</select>
</div>
<div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA" >
<div class="taskhead" style="margin-bottom: -90px !important;padding: 5px;background-color: #ccffff;height: 200px;margin: auto;border-radius: 5px;border: 1px solid #808080;">
<div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
<b>Name:</b>
<div id="er_users" style="width: 100%;overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
<table id="uid" style="width: 100%;margin-left: 5px; float: right;">
<thead style="background-color: #e0e0e0"><hr></thead>
<tbody>
<tr class="odd">
<td>Name 1</td>
</tr>
<tr class="even">
<td>Name 1</td>
</tr>
<tr class="odd">
<td>Name 2</td>
</tr>
<tr class="even">
<td>Name 2</td>
</tr>
</tbody>
<tfoot style="background-color: #e0e0e0"><hr></tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div style="margin: 0 1.5%; background-color: #D6D2D2 !important;width:0.2%;height: 265px !important;float:left;"> <br/></div>
<div style="width:45%;margin: 0 1%;float:left;">
<div style="margin-top: 1%"></div>
<b>User</b>
<div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA;" >
<div style="margin-bottom: -100px !important;padding: 5px;background-color: #e6f0a3;height: 200px;border-radius: 5px;border: 1px solid #808080;">
<div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
<b>Name:</b>
<div style="width: 100%; overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
<table id="uid" style="width: 100%;margin-left: 5px; float: right;">
<thead style="background-color: #e0e0e0"><hr></thead>
<tbody>
<tr class="odd">
<td>Name 1</td>
</tr>
<tr class="even">
<td>Name 1</td>
</tr>
<tr class="odd">
<td>Name 2</td>
</tr>
<tr class="even">
<td>Name 2</td>
</tr>
</tbody>
<tfoot style="background-color: #e0e0e0"><hr></tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
これは私のテーブルがどのように見えるべきかです
