Rendering summary and details #500
Description
Using the following html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-face</title>
<style type="text/css">
@font-face {
font-family: "NewZurica";
src: url("http://db.onlinewebfonts.com/t/ea265fee5f2171df02d2da4266768617.eot");
src: url("http://db.onlinewebfonts.com/t/ea265fee5f2171df02d2da4266768617.eot?#iefix") format("embedded-opentype"),
url("http://db.onlinewebfonts.com/t/ea265fee5f2171df02d2da4266768617.woff2") format("woff2"),
url("http://db.onlinewebfonts.com/t/ea265fee5f2171df02d2da4266768617.woff") format("woff"),
url("http://db.onlinewebfonts.com/t/ea265fee5f2171df02d2da4266768617.ttf") format("truetype"),
url("http://db.onlinewebfonts.com/t/ea265fee5f2171df02d2da4266768617.svg#NewZurica") format("svg");
}
html {
padding: 0;
margin: 0;
}
body {
background-color: #e1ddd9;
font-size: 12px;
color: #564b47;
padding: 0;
margin: 0;
}
.link {
position: relative;
margin: 0;
font-family: NewZurica;
font-size: 60pt;
}
.link1 {
position: relative;
margin: 0;
font-size: 60pt;
}
summary {
background-color: dodgerblue;
padding: 5px 10px 1em 10px;
}
details {
overflow: auto;
margin: .1em 0 -1em 0;
}
table {
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #959595;
}
</style>
</head>
<body>
<div class="link">
hello word!
</div>
<div class="link1">
hello word!
</div>
<details>
<summary>hello word!</summary>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</details>
</body>
</html>I expect:
But get:
Apart from the widths not being consistent, the details element is also non-collapsible.