Question

我想使用bootstrap2使表响应。下面是我的HTML代码。代码工作正常，但表没有响应。

<div class="span12">
        <div class="row">

         <table class="table table-bordered">
         <tr class="error">
            <td><strong>Time</strong></td>
            <td><strong> Monday </strong></td>
            <td ><strong> Tuesday </strong></td>
            <td ><strong> Wednesday </strong></td>
            <td ><strong> Thursday </strong></td>
            <td ><strong> Friday </strong></td>
            <td ><strong>Saturday</strong></td>
            <td ><strong> Sunday </strong></td>
        </tr>

     <tr class="warning">
        <td>07:00AM</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
        <td>A</td>
        <td>B</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr class="warning">
        <td>07:00AM</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
        <td>A</td>
        <td>B</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr class="warning">
        <td>07:00AM</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
        <td>A</td>
        <td>B</td>
        <td>-</td>
        <td>-</td>
    </tr>
  </table>
       </div> 
       </div>
       </div>

Answer 1

请尝试代码。它对我来说很好。请尝试让我知道。感谢。

<!DOCTYPE HTML>
    <html>
      <head>
      <style>
          body {
        margin: 0px;
        padding: 0px;
          }
        /* 
        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;
        }
        /* 
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";
            }
        }
    </style>
</head>
<body>
<div class="span12">
        <div class="row">
         <table class="table table-bordered">
         <tr class="error">
            <td><strong>Time</strong></td>
            <td><strong> Monday </strong></td>
            <td ><strong> Tuesday </strong></td>
            <td ><strong> Wednesday </strong></td>
            <td ><strong> Thursday </strong></td>
            <td ><strong> Friday </strong></td>
            <td ><strong>Saturday</strong></td>
            <td ><strong> Sunday </strong></td>
        </tr>

     <tr class="warning">
        <td>07:00AM</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
        <td>A</td>
        <td>B</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr class="warning">
        <td>07:00AM</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
        <td>A</td>
        <td>B</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr class="warning">
        <td>07:00AM</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
        <td>A</td>
        <td>B</td>
        <td>-</td>
        <td>-</td>
    </tr>
  </table>
       </div> 
       </div>
       </div>
</body>
</html>

Answer 2

嗨响应表在IE中不起作用所以解决方案是我们在移动或平板电脑视图中进行x-scroll-able下面是你可以解决的小提琴here

<强> HTML

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>A Heading</th>
                <th>A Longer Heading</th>
                <th>A Really Really Really Long Heading</th>
                <th>A Really Really...Oh Hell I Think You Get It.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>   
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>   
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>   
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>   
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>   
        </tbody>
    </table>
</div>

<强> CSS 。表容器{ overflow-y：scroll; -webkit-overflow-scrolling：touch; } @media screen和（min-width：480px）{ .table-container { 溢出：可见; } }

/* Making it pretty */
body{ 
    padding: 1em; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #222;
}
table{ 
    border-collapse: collapse; 
    border-spacing: 0; 
    background-color: white;
    width: 100%;
    border: 1px solid #c3c9cc;
}
th, td{
    padding: 1em 0.75em;
    text-align: left;
}
th{
    background-color: #f5f5f5;
    white-space: nowrap;
}
td{
    border-top: 1px solid #c3c9cc;
}

Answer 3

我知道这是旧帖子，但只是为了与其他人分享代码。

<table>
  <thead>
    <tr class="error">
      <th><strong>Time</strong></th>
      <th><strong> Monday </strong></th>
      <th><strong> Tuesday </strong></th>
      <th><strong> Wednesday </strong></th>
      <th><strong> Thursday </strong></th>
      <th><strong> Friday </strong></th>
      <th><strong>Saturday</strong></th>
      <th><strong> Sunday </strong></th>
    </tr>
  </thead>
  <tbody>
    <tr class="warning">
      <td>07:00AM</td>
      <td>X</td>
      <td>Y</td>
      <td>Z</td>
      <td>A</td>
      <td>B</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr class="warning">
      <td>07:00AM</td>
      <td>X</td>
      <td>Y</td>
      <td>Z</td>
      <td>A</td>
      <td>B</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr class="warning">
      <td>07:00AM</td>
      <td>X</td>
      <td>Y</td>
      <td>Z</td>
      <td>A</td>
      <td>B</td>
      <td>-</td>
      <td>-</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; 
}

/* 
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: "Time"; }
        td:nth-of-type(2):before { content: "Monday"; }
        td:nth-of-type(3):before { content: "Tuesday"; }
        td:nth-of-type(4):before { content: "Wednesday"; }
        td:nth-of-type(5):before { content: "Thursday"; }
        td:nth-of-type(6):before { content: "Friday"; }
        td:nth-of-type(7):before { content: "Saturday"; }
        td:nth-of-type(8):before { content: "Sunday"; }

    }

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px; }
    }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 495px;
    }
} */

完全被盗：https://css-tricks.com/responsive-data-tables/

如何使用bootstrap2.3.1使表响应

3 个答案: