如何在html5中使表响应？

Question

我在页面中使用了一个表格。我想让它变得敏感。我正在使用twitter bootstrap类，但它仍然无法正常工作。当宽度减小时，我希望页面中的圆圈与桌面模式中的圆圈完全并排。请帮忙。

.circle {
    width: 164px;
    height: 164px;
    border-radius: 164px;
    cursor: pointer;
    border: 1px solid #FFF;
    background: url(http://s26.postimg.org/uzuwbdxc5/img_164.png) no-repeat;
}

.smcircle {
    width: 65px;
    height: 65px;
    border-radius: 65px;
    cursor: pointer;
    border: 1px solid #FFF;
    background: url(http://s26.postimg.org/4q9tslbet/img_65.png) no-repeat;
}

<div class="container-fluid">
    <table id="wtable"   style="margin-top:152px; border:none;" width="100%" height="100%"  align="center">
        <tr>
            <td colspan="51">&nbsp;</td>
            <td rowspan="15">
            </td>
        </tr>
        <tr>
            <td colspan="18">&nbsp;</td>
            <td colspan="9" rowspan="10" valign="top">
                <div class="circle" style="vertical-align:text-top; margin-top:-33px;"></div>
            </td>
            <td rowspan="10" valign="top">&nbsp;</td>
            <td colspan="23" rowspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="11" rowspan="2">&nbsp;</td>
            <td colspan="4" rowspan="3">
                <div class="smcircle"></div>
            </td>
            <td colspan="3" rowspan="9">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="14" rowspan="3">&nbsp;</td>
            <td colspan="4" rowspan="4">
                <div class="smcircle"></div>
            </td>
            <td colspan="5" rowspan="5">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="29">&nbsp;</td>
            <td colspan="6" rowspan="9" valign="top">
                <a class="html5lightbox" href="http://www.youtube.com/embed/YE7VzlLtp-4">
                    <div class="circle"></div>
                </a>
            </td>
            <td colspan="3" rowspan="7">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4" rowspan="6">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4" rowspan="4">&nbsp;</td>
            <td colspan="2" rowspan="3">
                <div class="smcircle"></div>
            </td>
            <td colspan="8" rowspan="4">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="9">&nbsp;</td>
            <td colspan="6" rowspan="9" valign="top">
                <div class="circle" style=" margin-top: -28px; "></div>
            </td>
            <td colspan="2" rowspan="24">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" rowspan="8">&nbsp;</td>
            <td colspan="10" rowspan="7" valign="top">
                <div class="circle" ></div>
            </td>
            <td rowspan="7">&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="11">&nbsp;</td>
            <td colspan="12" rowspan="10" valign="top">
                <div class="circle" style="margin-top:-25px;"></div>
            </td>
            <td colspan="7">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="6">&nbsp;</td>
            <td colspan="3" rowspan="3">
                <div class="smcircle" style=" margin-top: -75px; "></div>
            </td>
            <td colspan="2" rowspan="6">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="6">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="8">&nbsp;</td>
            <td colspan="2" rowspan="5">
                <div class="smcircle"></div>
            </td>
            <td colspan="2" rowspan="8">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" rowspan="3">&nbsp;</td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="8" rowspan="3">&nbsp;</td>
            <td colspan="9" rowspan="9" valign="top">
                <div class="circle"></div>
            </td>
            <td rowspan="15">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="8" rowspan="10" valign="top">
                <div class="circle"></div>
            </td>
            <td colspan="2" rowspan="8">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="2" rowspan="3">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="8" rowspan="3">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="11">&nbsp;</td>
            <td rowspan="7">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td rowspan="11">&nbsp;</td>
            <td colspan="9" rowspan="9" valign="top">
                <div class="circle"></div>
            </td>
            <td colspan="8" rowspan="2">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="2" rowspan="3">&nbsp;</td>
            <td colspan="2" rowspan="2">
                <div class="smcircle"></div>
            </td>
            <td colspan="4" rowspan="3">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td rowspan="11">&nbsp;</td>
            <td colspan="6" rowspan="5" valign="top">
                <div class="smcircle"></div>
            </td>
            <td rowspan="6">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="11">
            </td>
            <td colspan="10" rowspan="8" valign="top">
                <div class="circle"></div>
            </td>
            <td colspan="8">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="8" rowspan="5">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="9" rowspan="2">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="6">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="4" rowspan="5">&nbsp;</td>
            <td colspan="10" rowspan="7" valign="top">
                <div class="circle"></div>
            </td>
            <td colspan="2" rowspan="7">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="9" rowspan="2">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="5" rowspan="4">&nbsp;</td>
            <td colspan="5" rowspan="7" valign="top">
                <div class="circle"></div>
            </td>
            <td rowspan="18">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td rowspan="17">&nbsp;</td>
            <td colspan="6" rowspan="10" valign="top">
                <div class="circle"></div>
            </td>
            <td colspan="5" rowspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="10" rowspan="2">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="3" rowspan="9">&nbsp;</td>
            <td colspan="4" rowspan="5" valign="top">
                <div class="smcircle"></div>
            </td>
            <td colspan="3" rowspan="9">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="8">&nbsp;</td>
            <td colspan="6" rowspan="5">
                <div class="smcircle"></div>
            </td>
            <td rowspan="9">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="8">&nbsp;</td>
            <td colspan="11" rowspan="10" valign="top">
                <div class="circle"></div>
            </td>
            <td colspan="2" rowspan="8">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="8" rowspan="4">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="5" rowspan="6">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="4" rowspan="4">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="6" rowspan="4">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="5" rowspan="8">&nbsp;</td>
            <td colspan="2" rowspan="4">
                <div class="smcircle"></div>
            </td>
            <td rowspan="8">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="6">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="4" rowspan="6">&nbsp;</td>
            <td colspan="11" rowspan="4">
                <div class="circle"></div>
            </td>
            <td rowspan="6">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td rowspan="5">
            </td>
            <td colspan="10" rowspan="4">
                <div class="circle"></div>
            </td>
            <td colspan="3" rowspan="5">&nbsp;</td>
            <td>
        </tr>
        <tr>
            <td colspan="2" rowspan="4" valign="top">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="11" rowspan="3">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="11" rowspan="2">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="10">&nbsp;</td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td></td>
        </tr>
    </table>
</div>

Answer 1

将table table-responsive类添加到您的表中。

这将在小型设备中为表添加水平滚动。

bootstrap-3的文档说： 通过在.table-responsive中包装任何.table来创建响应式表格，使它们水平滚动到小型设备（768px以下）。在大于768像素宽的任何物体上观看时，您不会发现这些表格有任何差异。

请参阅链接以获取更多解释： http://jasonbradley.me/bootstrap-responsive-tables/和文档：http://getbootstrap.com/css/#tables

希望这会有所帮助

更新：在此更新您的小提琴：http://jsfiddle.net/p7nxa/4/embedded/result/

Answer 2

表格代码：

<table>
<thead>
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
    <td>James</td>
    <td>Matman</td>
    <td>Chief Sandwich Eater</td>
</tr>
<tr>
    <td>The</td>
    <td>Tick</td>
    <td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>

CSS代码：

/* 
Generic Styling, for Desktops/Laptops 
*/
 table { 
 width: 100%; 
 border-collapse: collapse; 
 }
 /* Zebra striping */
 tr:nth-of-type(odd) { 
 background: #eee; 
 }
 th { 
 background: #333; 
 color: white; 
 font-weight: bold; 
 }
 td, th { 
 padding: 6px; 
 border: 1px solid #ccc; 
 text-align: left; 
 }

响应式设计CSS样式：

    /* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
   }

尝试这个，它可能对你有帮助。