Question

我确定这是HTML开发人员最愚蠢的问题。但我不是其中之一。

我有下表，我需要将表格中的三个圆形图像变成圆形而不是它们正在显示。即使我将宽度设置为50px，我也无法将它们舍入。 div就像'填充'表格行。我确定我要做的事情很简单。有人能帮助我吗？：

这是HTML代码：

<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
            <table border="1">
                <tbody><tr style="height: 200px">
                    <td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
                            <div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
                    </div></td>
                </tr>
                <tr>
                    <td colspan="3">
                            <h3 class="col-md-12 text-center" style="align-items: center">
                                Cantidad de Gente: <strong>Poca</strong>
                            </h3>
                    </td>
                </tr>
                <tr style="height: 50px; padding-top: 10px;">
                    <td style="height: 50px; width: 50px;">
                        <div style="background-color: green; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
                    </div></td>
                    <td style="height: 50px; width: 50px;">
                        <div style="background-color: yellow; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
                    </div></td>
                    <td style="height: 50px; width: 50px;">
                        <div style="background-color: red; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; ">
                    </div></td>
                </tr>
                <tr>
                    <td>
                        Poco
                    </td>
                    <td>
                        Mediana
                    </td>
                    <td>
                        Mucho
                    </td>
                </tr>
            </tbody></table>
    </div>

Answer 1

如果你将50px高度和50px宽度放在圆圈本身而不是它的容器上，你将得到一个完美的圆圈。我还添加了margin:0 auto来居中，但您可能不需要这个。

<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
            <table border="1">
                <tbody><tr style="height: 200px">
                    <td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
                            <div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
                    </div></td>
                </tr>
                <tr>
                    <td colspan="3">
                            <h3 class="col-md-12 text-center" style="align-items: center">
                                Cantidad de Gente: <strong>Poca</strong>
                            </h3>
                    </td>
                </tr>
                <tr style="height: 50px; padding-top: 10px;">
                    <td style="height: 50px; width: 50px;">
                        <div style="background-color: green; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
                    </div></td>
                    <td style="height: 50px; width: 50px;">
                        <div style="background-color: yellow; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
                    </div></td>
                    <td style="height: 50px; width: 50px;">
                        <div style="background-color: red; width: 50px; height:50px; border-radius: 50%; margin:0 auto;">
                    </div></td>
                </tr>
                <tr>
                    <td>
                        Poco
                    </td>
                    <td>
                        Mediana
                    </td>
                    <td>
                        Mucho
                    </td>
                </tr>
            </tbody></table>
    </div>

Answer 2

您创建的表格的宽度为300px，而您定义的带有三个圆圈的行的宽度为50px，即总共150px。并且由于表格行元素假设填充表格宽度，因此它将您的行拉伸到300px。你需要将行td元素的宽度和高度增加到100px以覆盖整行，或者如果你想要圆的严格25px半径，那么你可以添加填充到你的td元素。

不能在表格行中设置div宽度

2 个答案: