Question

<style> #gallery_t_ta {position: fixed; top: 15%; left: -10px; width: 300px; border-radius: 10px; background-color: #ffffff; padding: 10px; width: calc(100% - 310px); max-width: calc(100% - 310px); height: 100px; max-height: 100px; overflow-x: auto;} #gallery_t_ta td{width: 150px; max-width: 150px !important; overflow-y: hidden;}</style>
<table id="gallery_t_ta">
<tr>
    <td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button> 
    </td>
    <td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button> 
    </td>
    <td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button> 
    </td>
</tr>
</table>

好的，所以我有这个。宽度不在td上工作，当我更多时，它不断缩小。 x滚动也没有工作。

这不可能吗？

我希望能够向左和向右滚动所有项目。我以前用y滚动完成了，也许x不可能。

Answer 1

在min-width:150px;

上设置<td>

#gallery_t_ta td{
    min-width: 150px;
}

Answer 2

设置 min-width：150px;

另外我认为你需要x-scroll 我希望以下一些代码可以帮助您解决问题。

<style>
    #gallery_t_ta td{
        min-width: 150px;
    }
</style>
<div style="max-width: 150px; overflow-x: auto;">
    <table id="gallery_t_ta">
        <tr>
            <td>
                <span id="t1n">Twister 10ct (2pk)</span><br>
                <span id="t1p">9.00</span><br>
                <button onclick="">Add To Cart</button>
            </td>
            <td>
                <span id="t2n">Twister 10ct (2pk)</span><br>
                <span id="t2p">9.00</span><br>
                <button onclick="">Add To Cart</button>
            </td>
            <td>
                <span id="t3n">Twister 10ct (2pk)</span><br>
                <span id="t3p">9.00</span><br>
                <button onclick="">Add To Cart</button>
            </td>
        </tr>
    </table>
</div>

Answer 3

您需要为<td>元素width或min-width提供。

#gallery_t_ta td{
    width: 150px;
}

此外，不要在您的代码或HTML文件的<head>中使用CSS内联，最好将所有CSS放入单独的文件中并将其链接到：

<link href=yourfile.css rel=stylesheet type=text/css>

这可以使您的代码更清晰，并且在您使用CSS将样式应用于多个HTML页面时，将来会为您省去很多麻烦。这样，您就不会有多余的代码需要在多个地方进行更新才能进行一次更改。

Answer 4

<style> #gallery {position: fixed; top: 15%; left: -10px; background-color: #ffffff; width: calc(100% - 310px); max-width: calc(100% - 310px); height: 150px; max-height: 150px; overflow-x: auto; overflow-y: hidden; border-radius: 10px;} #gallery td{min-width: 150px; min-height: 150px; max-width: 150px; max-height: 150px;}</style>

<div id="gallery">
<table><tr><td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button> 
    </td>

    <td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button> 
    </td>
    <td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button> 
    </td>
    <td>
        <span id="t1n">Twister 10ct (2pk)</span><br>
        <img src="./product/twister.png" height="50" width="50"><br>
        <span id="t1p">9.00</span><br>
        <button onclick="add1()">Add To Cart</button>
    </td></tr></table>
</div>

修正了它。如果其他人有这个问题，这是有效的。向下，它将div的底部（圆形边缘）更改为方形。

最大宽度不是没有用

4 个答案: