問題タブ [border-spacing]

テーブルのCSSで設定border-spacing:0する必要があります。border:0

追加border-collapse:collapseしborder:0ても機能しませんでした。CSS では、下に追加することも、単に下にある border または border-spacing プロパティを単に削除することもできませんでしborder-collapse:separateたborder:0。border-collapse:collapse

Chrome でファンクション キーをクリックするF12と、テーブル要素のボーダー間隔が 2px のままで、ボーダーの幅とボーダーの折りたたみに関係なく変化しないことに気付きました。

コードをテーブル構造から他の構造に変更せずにこの問題を解決する方法はありますか?

行を区切るためにボーダー間隔を使用するテーブルがあります。

JQuery sortable を使用すると動作しますが、移動すると行が下にジャンプしますが、これを修正できますか?

このコードは次のことを示しています。

私は最近、ある種の描画グリッドに取り組んでおり、境界線の間隔を使用しています。

アイデアは、事前に設定されたサイズと境界線の間隔を持つ固定量のセルでテーブルを形成することです。

これらのパラメータに基づいて、テーブル全体のサイズが計算されます。

最後に、ネストされたループを介してテーブルが作成されます。

小さな (<4px) 境界線サイズを使用すると、Chrome で正しく機能しないようです。セル サイズは 0.4 px 前後でオフセットされ始めます。Chrome には、このオフセットに影響を与える計算済み Webkit オプションが 2 つあります。

ただし、次のように変更することはできません。

計算された値は 0.8 ピクセルのままです。最終的には大したことではありませんが、本当に気になります。このような動作の理由はありますか?また、そのような低い値で正確なセル サイズを設定することは可能ですか?

フィドルの例を次に示します: https://jsfiddle.net/kdqoc4vy/1/

cell_size は正確に20px である必要がありますが、実際には 19.2 です。

PS With Edge すべてが正常に機能します。テーブルが小さい場合、この 0.8px はほとんど問題になりませんが、64 行と 64 列になると、このような不一致が問題になります。お返事ありがとうございます！

div コンテナー内にいくつかの div をラップしましたが、境界線と要素の間に奇妙なスペースが見られます。問題はchrome と edgeで発生しています。Mozillaを試してみましたが、うまくいきました。

カスタムCSSを使用して、ブートストラップを使用しています。

関連するコードも共有しています：

スニペットでは配置は完璧に見えますが、私にはいくらかのスペースが表示されています。そのためにいくつかの切り取りを添付しています：

パディングとマージンに問題はないと思います。どんな助けでも大歓迎です:)

更新:エッジでも同じことが起こっています。そして、要素に追加した5vhのマージンを削除すると、問題は解決し#boxます。