行数の異なるtableを、横並びにして上揃えにして表示したいです。

Question

使用環境は
SharePoint Foundation 2010
Windows（7と10半分くらい、だんだん10が増える予定）
IE11
社内環境なので、見る人はPCでしか見ません。全員1280*768以上の画面です。
私の権限はサイト管理者です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

こんな感じで表を表示したいです。
(1e0ea04883d6c12a9b6971da2b2a87e7.jpeg)

横に並べたいテーブルは3個で、全部行数が異なります。

<div id="tblmembers">
<table id="pitcher">
<tr><td>小笠原</td></tr>
<tr><td>又吉</td></tr>
<tr><td>福谷</td></tr>
<tr><td>岩瀬</td></tr>
<tr><td>田島</td></tr>
</table>
<table id="infield">
<tr><td>福田</td></tr>
<tr><td>亀澤</td></tr>
<tr><td>堂上</td></tr>
<tr><td>京田</td></tr>
</table>
<table id="outfield">
<tr><td>藤井</td></tr>
<tr><td>大島</td></tr>
<tr><td>平田</td></tr>
</table>
</div>

vertical-alignってインライン要素じゃないとダメだったんだっけと思って
tableにinline-blockをつけてみました。

#pitcher,
#infield,
#outfield {
  display: inline-block;
  float: left;
  vertical-align: top;
}

でも
3個のtableが
横には並ぶのですが
縦方向中央揃えになってしまうのです。

上で揃えたいのです。
inline-blockでない方法のほうが良いのでしょうか。
適切な方法を教えてください。

PCでしか見ないので、レスポンシブとかそういうのは考慮しなくて大丈夫な環境です。
IE11、Windowsは7と10が半分くらいです。

Comments

[m.ts10806]

ご提示ソースで上で揃っているのですが・・・（IE11,Chrome）

[kei344]

外側のHTML要素とそれにあたっているCSSも提示ください。

[Lhankor_Mhy]

再現しませんでした。テーブルは上揃えになります。/ ところで、floatをつけてしまうと、inline-blockが無効になるような気がしますが……

[sumire_cl]

外側はなくてほんとうにこれだけです。強いて言えば、SharePointの中のページに書いている、というくらいです。

[kei344]

「SharePoint」タグを質問に追加されてはいかがでしょう。

[sumire_cl]

たしかに、試してみたらSharePointの中へ作るときだけおかしいです…！Sharepointが悪いのか、サイトコレクション管理者側で何かしてるせいなのかわかりませんが、SharePointのせいだということは少なくともわかったので、タグを追加しました。ありがとうございます。

[sumire_cl]

> Lhankor_Mhy さん　floatとinline-blockを一緒に使えないのは今回調べて初めて知りました！文法チェックにかけてみたらそこを怒られました。ありがとうございます。

Answer 1

#tblmembers {
  display: flex;
  justify-content: space-around;
}
#tblmembers > div {
  width: 30%;
}
table {
  border: 1px solid;
  width: 100%;
}

<div id="tblmembers">
  <div>
    <table id="pitcher">
      <tr><td>小笠原</td></tr>
      <tr><td>又吉</td></tr>
      <tr><td>福谷</td></tr>
      <tr><td>岩瀬</td></tr>
      <tr><td>田島</td></tr>
    </table>
  </div>
  <div>
    <table id="infield">
      <tr><td>福田</td></tr>
      <tr><td>亀澤</td></tr>
      <tr><td>堂上</td></tr>
      <tr><td>京田</td></tr>
    </table>
  </div>
  <div>
    <table id="outfield">
      <tr><td>藤井</td></tr>
      <tr><td>大島</td></tr>
      <tr><td>平田</td></tr>
    </table>
  </div>
</div>
```**動くサンプル：**[https://jsfiddle.net/njjsqa1e/1/](https://jsfiddle.net/njjsqa1e/1/)

---

どういうCSSがもともとあたっているかを確認して調整してみてはいかがでしょうか。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)

Comments

[sumire_cl]

F12！（規則でIEしか使えないのですがやっぱりF12でした）
そんなようなものがあることは知っていましたが、それを何にどう使うのかよく知りませんでした。
こういうときに使うのか！
そしてSharePointのもっと上層の、私の手の届かないほうで何かされているのが原因だということがわかりました。
ありがとうございます。
その原因になっているそれをなんとかするCSSを書きます。（あまり良い方法ではないのかもしれませんが……）

Answer 2

#tblmembers table{
float:left;
border-collapse:collapse;
margin-right:10px;
}
#tblmembers table td{
border:solid 1px #000000;
}
]