Question

我不知道这是否属于Chrome更新或其他任何内容，但我的桌子曾经在Chrome中工作很好，现在它看起来像这样：

奇怪的是，这是在Safari中使用的表：

还有其他人经历过这个吗？这是表格的css：

<style>

/*The CSS you need to achieve cellspacing="0" is

table {border-collapse: collapse;} */

table  {
width: 80%; 
height:100px;
border-collapse: collapse;
position: relative;
display: block;
padding: 0;
margin: 0;
border: 0;
white-space: nowrap;
margin-left: auto;
margin-right: auto;

}

tr {
/*border: 1px solid black;*/
padding: 5px;
margin-top: 20px;
/*border: 1px solid #CCCCCC; padding: 3px;*/
display: inline-block;
float: left;
margin-right: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,      0.19);

}

td {
float:left;
display: block;
margin: 0;
border: 0;
}

td:hover {
opacity: 0.9;
}

th {
display: block;
margin: 8px;
padding: 0;
text-align:center !important; 
color: #000;
font-family:'Dense-Regular';
font-size: 23px;
letter-spacing: 2.5px;
}

table a:link {
color:black;
border-style: solid;
border-width: 2px;
background-color: white;
padding: 5px;
}

table a:hover {
color:white;
border-style: solid;
border-width: 2px;
background-color: black;
text-decoration: none;
}

.clickable-area {
    display: block;
    width: 100%;
    height: 300px;
    background-color: #ffefef;
}

.clickable-area:focus {
   outline: 0;
}


</style>

html：

<div class="pageHeader">

  <h1>Recommended events &amp; content in</h1>
  </div> <!-- Single button -->
<!-- where button event goes -->

<div class="form-group" id="locationdrop">
<form>
<select name="users" id ="location" onchange="showLocation(this.value)">
  <div id="locationphp"><option value="<?php echo $_SESSION['Location'];?>" selected="selected"><?php
echo $_SESSION['Location'];?></option>  }
</div>
  <option value="Manchester">Manchester</option>
  <option value="Nottingham">Nottingham</option>
  <option value="Leeds">Leeds</option>
  <option value="London">London</option>
  </select>
</form>

<br>
<div id="txtHint"><b>Select a city.</b></div>
</div>

ajax：

<script>
function showLocation(str) {

    if (str == "") {
        document.getElementById("locationphp").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","getLocation.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

php：

<?php
$result = mysqli_query($con,$sql);
    echo "<table>"; 
    echo "<tr>";
while($row = mysqli_fetch_array($result)) {

    echo "<td>"?> <img src= "<?php echo $row ['event-photo']; ?>" height="300" width="300"> <?php echo "</td> ";
    echo "<th>" . $row['name'] . "</th>";
    echo "<th>" . $row['date'] . "</th>";
    echo "<th>" . $row['overview'] . "</th>";
    echo "<th>" . $row['Location'] . "</th>";
    echo "<th>" . $row['venue'] . "</th>";
    echo "<th>"?> <a href="<?php echo $row['link']; ?>" target="_blank" >Get tickets</a> <?php echo "</th>";
    //if discount = yes then display the logo with a hover and pop up like... will need to import j query
    //echo  "<th>" <div class ="mellado_offer" data-role="popup" id="popupArrow" data-arrow="true">
    //<p>A paragraph inside the popup with an arrow.</p>
    //<p>This second paragraph serves to increase the height of the popup</p>
    //</div><a href="#" id="open-popupArrow" class="clickable-area"></a> "</th>";
    echo "</tr>";
}

echo "</table>";
mysqli_close($con);
?>

预先感谢任何回复：）

镀铬表样式 - 曾经工作但现在没有

0 个答案: