テーブル適応とオーバーフローのいくつかの設定の詳細な説明

<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <テーブルクラス="bg-white">
            <tr>
                <th>シリアル番号</th>
                <th>開始時間</th>
                <th>終了時間</th>
                <th>備考</th>
                <th>オペレーション</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2014/8/2</td>
                <td>2015/1/1</td>
                <td>時間はどこへ消えたのでしょうか?</td>
                <td><a href="#">編集</a></td>
            </tr>
        </テーブル>
    </div>
</div>

.ell { テキストオーバーフロー: 省略記号; 空白: ラップなし; オーバーフロー: 非表示; }

td{ 境界線:1px 実線 #ff4136;}
.title{ 幅: 100px;}
.kaiyao{ 幅: 200px;}
.time{ 幅: 120px;}

<div class="fz">
    <div style="width: 800px;" class="bg-grey p10">
        <テーブルクラス="bg-white pctW">
            <tr>
                <th class="title">タイトル</th>
                まとめ
                <th class="time">時間</th>
            </tr>
            <tr>
                <td>1行ドット表示</td>
                <td>Chrome 34 以降ではレスポンシブ画像に対応しているとのことで、<img> タグに特定の属性を設定することで、画像の自動レスポンシブ取得が実現できるそうです。ぜひ試してみてくださいね～</td>
                <td>2014-04-09 23:51</td>
            </tr>
            <tr>
                <td>連続文字の折り返し</td>
                <td>北京の都市を訪れるのは今回が初めてです</td>
                <td>2014-04-09 23:53</td>
            </tr>
        </テーブル>
    </div>
</div>

テーブル{テーブルレイアウト:固定;}

.cell_bk { 表示: テーブル; 幅: 100%; テーブルレイアウト: 固定; 単語折り返し: 単語区切り; }
.bk { 単語折り返し: 単語区切り; }

/*連続した英語の文字は2列の適応セルに折り返されます*/
.cell_bk { 表示: テーブル; 幅: 100%; テーブルレイアウト: 固定; 単語折り返し: 単語区切り; }

.cell{ display: テーブルセル; *display: インラインブロック;}

<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <div>
            <img src="images/xxx.jpg" class="l p10" width="100">
            <div class="cell">
                <p class="cell_bk">
                    1977年のこの日、28歳のラツィオのミッドフィールダー、ルチアーノ・レ・チェッコーニと2人の友人がローマの宝石店に足を踏み入れた。どういうわけか、彼は突然、冗談を言いたくなった。宝石店に入ると、彼は「止まれ！強盗だ！」と叫んだ。宝石店のオーナーが飛び出してきて彼を撃った後、彼が最後に発した言葉は「冗談だ！冗談だ！」だった。30分後、彼は死亡した。
                    <br/><br/>
                    <span>//zxx:私は xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx です</span>
                    <h3>処理なし</h3>
                </p>
            </div>
        </div>
    </div>
</div>

<img src="images/xxx.jpg" class="l p10" width="200">
      <div style="padding-left: 220px;">
              <p class="cell_bk">