Html 如何实现像Google Chrome'；s

我正在尝试用HTML和CSS实现一个自定义下拉式自动完成建议列表。我基本上希望它看起来像Chrome的（见下文）

为了实现这一点，我尝试使用一个绝对位于输入元素下面的表。然后我使用

垂直对齐：中间td

元素上的code>和

文本对齐：右仅在第二个
td
元素上。只要让桌子自动确定自己的宽度，一切看起来都很好。问题是，当我在表格上设置
min width
时，它总是至少与输入一样宽。此时，第二个
td
右侧有空格。我尝试将第二个
td
设置为向右浮动，或者完全将其定位到右侧，但没有任何效果。对于初学者，
垂直对齐：中间似乎不再有效。其次，通过绝对定位，我得到两个
td
元素有时重叠

有没有人有一种外观/功能类似Chromes的解决方案？理想情况下，我不想借助JavaScript动态更改样式。我也不想硬编码元素的高度/宽度，因为我希望它足够灵活，可以轻松地设置样式。
@Chris，我似乎无法重现您的问题。Min width将扩展表以及带有它的行/列


div{
背景色：红色；
}
桌子{
最小宽度：300px；
背景颜色：绿色；
}
运输署{
垂直对齐：中间对齐；
}
td~td{
背景色：白色；
文本对齐：右对齐；
}

第一列1
第二列1
第一列2
第二列2
您应该使用库。这很常见。@4castle我查看了可用的库，但它们并不完全适合我的需要。@4castle实际上没有一个功能像Chrome的，所以这不是一个很有用的建议。感谢您的帮助，它帮助我找到了问题。我应该包括我的CSS。出于某种原因，我将table元素设置为
display:block
，这是导致此行为的原因。好了，现在我了解了为什么我将其设置为display block。。。现在，我无法设置最大高度并使用
overflow-y:scroll
。请使用div容器并将最大高度/overflow-y指定给它，而不是您很乐意为其服务！