[記事数:1,202] 日本を元気にするキーワード、地域活性化×中小企業× ITのTips and Quotes(秘訣と引用文)
creative  link  memo 

CSSで作るシンプルなテーブルデザイン まとめ




Timeline タイムライン

フラットデザイン向け三角矢印つきtable

table001

css

table.company {
    width: 500px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
    font-size: 12px;
}
 
table.company th,
table.company td {
    padding: 10px;
}
 
table.company th {
    background: #295890;
    vertical-align: middle;
    text-align: left;
    width: 100px;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
    font-size: 15px;
}
 
table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #295890;
    border-width: 10px;
    margin-top: -10px;
}
/* firefox */
@-moz-document url-prefix() {
    table.company th::after {
        float: right;
        padding: 0;
        left: 30px;
        top: 10px;
        content: " ";
        height: 0;
        width: 0;
        position: relative;
        pointer-events: none;
        border: 10px solid transparent;
        border-left: #295890 10px solid;
        margin-top: -10px;
    }
}
 
table.company td {
    background: #f8f8f8;
    width: 360px;
    padding-left: 20px;
}

html

<table class="company">
    <tbody>
        <tr>
            <th class="arrow_box">会社名</div></th>
            <td>株式会社LIG</td>
        </tr>
        <tr>
            <th class="arrow_box">所在地</th>
            <td>
                〒110-0015<br>
                東京都台東区東上野2-18-7 共同ビル 10F
            </td>
        </tr>
        <tr>
            <th>TEL</th>
            <td>
                03-6240-1253
            </td>
        </tr>
        <tr>
            <th>事業内容</th>
            <td>
                ウェブサイト制作事業<br>
                (企画、マーケティング、デザイン制作、システム開発)<br>
                自社メディア運用事業<br>
                プロモーション・コンテンツ企画制作事業
            </td>
        </tr>
    </tbody>
</table>

会社案内表

3878_5a

css

table {
	border-collapse: collapse;
	width:100%;
}
th.t_top {
    border-top: #be1309 4px solid;
}
th {
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
	font-weight: normal;
}
td.t_top {
	border-top: #b3b3b3 4px solid;
}
td {
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
}
tr:hover {
    background: #3D80DF;
    color: #FFFFFF;
}

html

<table summary="会社案内表">
  <tr>
    <th class="t_top" width="180">会社名</th>
    <td class="t_top">株式会社○○○</td>
  </tr>
  <tr>
    <th>代表者名</th>
    <td>山本 太郎</td>
  </tr>
  <tr>
    <th>所在地</th>
    <td>〒000-0000 東京都新宿区西新宿00-00</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>000-0000-0000</td>
  </tr>
  <tr>
    <th>メールアドレス</th>
    <td>000@000.com</td>
  </tr>
</table>

画像一覧





FavoriteLoadingお気に入りAdd to favorites
CSSだけで角を丸くする方法 ボックスの四隅すべての角を丸くする書き方をご紹介いたします。記述方法はとても簡単で、以下のように、border-radiusプロパティの値に「丸くする角の半径」を数値で指定するだけです。 角を丸くするborder-radiusプロパティは、FirefoxやChrome等の古いバージョン...
画像を使わずにCSSだけで角を丸くする方法... CSS3で追加されたborder-radiusプロパティを使えば、スタイルシートだけで枠線の角を丸くできます。これなら、「四隅の角丸を画像で用意して配置を工夫する」というような複雑で面倒なことをせずに、簡単にボックスの角を丸くできます。 2/3 画像を使わずにCSSだけで角を丸く...
WordPressで記事ごとに個別のCSSを設定する方法... body内のstyle指定は非推奨 一部分のスタイルを変えるだけなら、本文内で直接指定するのが一番楽かもしれません。 指定方法はおもに 2 つ。 まず 1 つ目は、style を記事本文入力エリアの冒頭に書いてしまう方法。 2 つ目は、タグに直接 styl...
カテゴリ表示を横並びにカスタマイズ... Twenty Fifteenのカテゴリ表示を横並びにカスタマイズ Widget全部を指定 Twenty Fifteenのカテゴリ表示を横並びにカスタマイズ;; | ジョッパリ・ワールド CS...
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技... 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのd...
1行内に左寄せと右寄せを同時に書きたい... 左寄せ 右寄せ 1行内に左寄せと右寄せを同時に書きたい All About
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50... シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 ...
CSSでテキストを書き換える方法 下記のコードを参考にしてください。 まず書き換えたい要素のfont-sizeを0に設定します。 次に書き換え後の文字列を疑似要素で作成し、そちらはfont-sizeを任意の値に設定してください。以上です。 サーバーサイドのプログラムを変更せずに、表示されるテキストだけ変えたいときにおすすめです...
FacebookのLike Boxは2015年6月23日で終了。Page Pluginに変わります... FacebookのLikeBox(サイトにFacebookページの情報を埋め込むための仕組み)の仕様がかわり、2015年6月23日から使用しているLikeboxが使えなくなります。 名称もLikeboxから「Page Plugin」に変更になります。 ・Page Pluginのレスポンシブ対...
CSSで作る見出しデザイン 【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス CSSで作る見出しデザイン | Web’Notes 見出...

コメントを残す