我不知道这是否属于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 & 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);
?>
预先感谢任何回复:)