ユーザーが表示しようとしているスポーツを選択できるスコアボードを作成しようとしています。このサイトの検索のおかげで、その部分はかなりうまく突き止められたと思います-しかし、スコアボードも水平方向にスクロールできるようにしたいと思います。2つの機能を組み合わせるのに苦労しています。
これが私が取り組んできたjsFiddleです。
そしてコード：
<div class="sport-select">Select sport:</div>
<div class="select-wrapper">
<select id="selectMe">
<option value="option1">Football</option>
<option value="option2">Volleyball</option>
<option value="option3">Softball</option>
<option value="option4">Boys Soccer</option>
</select>
</div>
<div id="option1" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team A</td>
<td class="score">17</td>
</tr>
<tr>
<td class="team">Team B</td>
<td class="score">14</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team C</td>
<td class="score">9</td>
</tr>
<tr>
<td class="team">Team D</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team E</td>
<td class="score">15</td>
</tr>
<tr>
<td class="team">Team F</td>
<td class="score">32</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team G</td>
<td class="score">28</td>
</tr>
<tr>
<td class="team">Team H</td>
<td class="score">17</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team I</td>
<td class="score">18</td>
</tr>
<tr>
<td class="team">Team J</td>
<td class="score">16</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team K</td>
<td class="score">30</td>
</tr>
<tr>
<td class="team">Team L</td>
<td class="score">58</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team M</td>
<td class="score">84</td>
</tr>
<tr>
<td class="team">Team N</td>
<td class="score">56</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team ABC</td>
<td class="score">40</td>
</tr>
<tr>
<td class="team">Team 123</td>
<td class="score">51</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team MI</td>
<td class="score">4</td>
</tr>
<tr>
<td class="team">Team NW</td>
<td class="score">78</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team ERT</td>
<td class="score">9</td>
</tr>
<tr>
<td class="team">Team QWERW</td>
<td class="score">54</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option2" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team O</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team P</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team Q</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team R</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team S</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team T</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team U</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team V</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team W</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team X</td>
<td class="score">0</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option3" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team Y</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team Z</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team AA</td>
<td class="score">4</td>
</tr>
<tr>
<td class="team">Team BB</td>
<td class="score">2</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team CC</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team DD</td>
<td class="score">2</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="option4" class="group">
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team EE</td>
<td class="score">3</td>
</tr>
<tr>
<td class="team">Team FF</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team GG</td>
<td class="score">0</td>
</tr>
<tr>
<td class="team">Team HH</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<table class="boxscore">
<tbody>
<tr>
<td class="team">Team II</td>
<td class="score">0</td>
</tr>
<tr>
<td class="team">Team JJ</td>
<td class="score">1</td>
</tr>
<tr>
<td class="info" colspan="2">Final</td>
</tr>
</tbody>
</table>
</div>
</div>
その他のコード (ドロップダウン):
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#' + $(this).val()).show();
})
});
CSS:
.boxscore {
font-family: verdana;
font-size: 9px;
border: 1px solid #d8d8d8;
border-collapse: collapse;
background: #fbfbfb;
color: #333;
display: inline-block;
}
.boxscore a {
color:#1b76bc;
text-decoration: none;
}
.team {
padding: 2px;
border-bottom: 1px dotted #d8d8d8;
}
.score {
padding: 2px;
border-bottom: 1px dotted #d8d8d8;
}
.info {
padding: 2px;
color:#333;
background: #fbfbfb;
font-weight:bold;
border-top: 1px solid #d8d8d8;
}
.group {
width: auto;
overflow:hidden;
height:55px;
}
.block {
display: inline-block;
}
.select-wrapper {
float:left;
background: transparent;
width: 100px;
padding: 5px;
font-size: 10px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #333;
font-family: verdana;
clear: left;
}
.sport-select {
float:left;
font-size: 10px;
color: #333;
font-family: verdana;
font-weight: bold;
padding-left: 5px;
}