Вот про min-width я не подумал. Круто)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 700px;
height: 100px;
margin: 30px auto;
border: 1px solid #ccc;
overflow-x: scroll;
}
#ruler {
border: 1px solid #FF0000;
display: table;
height: 20px;
}
#ruler div {
border-right: 1px solid #999966;
display: table-cell;
height: 20px;
min-width: 99px;
width: 99px;
}
</style>
</head>
<body>
<div id="container">
<div id="ruler">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
devote, разницы в поведении нет. Просто возможны расхождения из-за отсутствия display:table-row элемента.
Убери в коде выше min-width и ты поймешь о чем я говорил.