Question

在 Chrome浏览器的移动模式下，这只是一个简单的table显示，但是td的某些边框没有显示出来，就像在图片中一样。有人可以告诉我为什么吗？

 <!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AAAAAA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <style>
        ul, ol { list-style: none; }
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
    dl, dt, dd, ul, ol, li, 
    pre, 
    form, fieldset, legend, button, input, textarea, 
    th, td ,tr{
        margin: 0;
        padding: 0;
    }
    ul, ol { list-style: none; }
    table{
        border-radius: 4px;
        color: #000;
        border-collapse:collapse;
        width: 100%;
        table-layout:fixed
    }
    table td,th{
         white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        padding:6px;
        border:1px solid #ccc;
    }
 </style>
</head>
<body>
    <form name="form1" method="post" action="#" id="form1">
    <div data-role = "page">
    <div data-role = "content">
            <table>
               <tr>
                   <th>AAAAAAAA</th>
                   <th>AAAAAAAA</th>
                   <th>AAAAAAAA</th>
                   <th>AAAAAAAA</th>
                   <th>AAAAAAAA</th>
                   <th>AAAAAAAA</th>
               </tr> 
               <tr>
                   <td>AAAAAAAA</td>
                   <td>AAAAAAAA</td>
                   <td>AAAAAAAA</td>
                   <td>AAAAAAAA</td>
                   <td>AAAAAAAA</td>
                   <td>AAAAAAAA</td>
               </tr>
            </table>        
        </div>
    </div>
    </form>
</body>    
</html>

为什么表格的某些边框会消失？

0 个答案: