ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

対象のセレクタに-webkit-overflow-scrolling: touch;　を追加すると、スクロールした際になめらかな動きになります。

.profile-area{
	-webkit-overflow-scrolling: touch;
	overflow: auto;
	white-space: nowrap;　
}

※jQueryで調べてしまいました。。

Navbar最上部固定ですが、bootstrap4ではbootstrap3から仕様が変更となり、navbar-fixed-topは効きません。

navbar-fixed-topではなく、fixed-topを使います。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

css側では、margin-top:70px;を設定します。

body {
	margin-top:70px;
}

スクロールしても固定されるようになりました。

キャッ～

bootstrapcdnから、cssのパスを取得します。
https://www.bootstrapcdn.com/

https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

cdn読み込みを書きます。

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

documentのnavsを参考に当てはめていきます。
http://getbootstrap.com/docs/4.0/components/navs/

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="">管理画面</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">予約状況 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">予約入力</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">出欠勤登録</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">予約実績</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">個別データ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">IPアドレス管理</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">スタッフ管理</a>
      </li>
    </ul>
    <ul class="nav justify-content-end">
    <li class="nav-item">
    	<a class="nav-link disabled" href="#">ログアウト</a>
  	</li>
    </ul>
  </div>
</nav>
hogehoge

初期

bootstrap使用後

非常に良い！

tableをdivタグで囲って、以下のように、overflow:auto;とwhite-space:nowrap;を設定します。
html

<div id="id_name">
<table>
</table>
</div>

css

#id_name{
	overflow: auto;
	white-space: nowrap;　
}

すると、他のコンテンツは崩れず、tableだけ横にスクロールできます。

knocks its down!

html

<div class="confirm">
<table>
<tr><td>お名前</td><td>hogehogehoge様</td></tr>
<tr><td>メールアドレス</td><td>hogehogehoge</td></tr>
<tr><td>ご予約日付</td><td>hogehogehoge</td></tr>
<tr><td>時間</td><td>hogehogehoge</td></tr>
<tr><td>コース</td><td>hogehoge</td></tr>
<tr><td>担当</td><td>hogehogoehogehoge</td></tr>
</table><br>
</div>

tr tdが左側、td+tdが右側になります。

.confirm table,.confirm td,.confirm th {
border-collapse: collapse;
border: 1px solid #CCCCCC;
}
.confirm tr td{
	width:180px;
	padding-left:15px;
	background-color:#BAD3FF;
}
.confirm td+td{
	width:600px;
	background-color:#fff;
}

divタグの横並びで、border-collapse: separateを使った際に、囲ったエリアにborder-spacingを使うと、左右に余白ができてしまいます。

.class_areaname{
	border-collapse: separate;
	border-spacing: 5px 0; 
}
.class_name{
        display: table-cell;
}

そのため、各cell(divタグ)の方に、padding-right:;を設定すれば、左揃えになります。

.class_areaname{
	border-collapse: separate;
}
.class_name{
        display: table-cell;
        padding-right:5px;
}

右だけ余白ができました。

nowrapを加えます

<td nowrap>hogehoge</td>

nowrap追加前

nowrap追加後

2~3日、ずっと悩んでました。。

1.table tdのcssは

td {
  write something;
}

2. table td にclassを付けた場合
例

<td class="selected">hoge</td>

cssは、

td.selected {
   write something;
}

3.table tdの中にlink(aタグ)のcss

td a{
  write something;
}

4.table classを付けたtdの中のlink(aタグ)のcss

<td class="selected"><a href="?param=hoge">foo</a></td>

cssは

td.selected a{
  write something;
}

下のキャプチャのように、classをつけているtdの中のaタグのcolorを#fffにできました。