CSS使表格粘在div的边缘

Posted 2023-03-06

【中文标题】CSS使表格粘在div的边缘

【英文标题】：CSS make table stick at the edge of a div

【发布时间】：2021-10-01 20:14:44

【问题描述】：

给定：

function App() 
    return (
        <div className="main-container">    /* the weather box (left) */
         <div className="weather-box"></div>  /* the weather information rectangle (right) */
           <div className="weather_information">
             <div className="left_column">
               <tr>
                leftColumnBuilder()
               </tr>
             </div>
             <div className="right_column">
               <tr>
                rightColumnBuilder()
               </tr>
             </div>
           </div>
         </div>
  )


const leftColumnBuilder = () => 
    return (
        <table>
            <React.Fragment>
                <tr>Wind</tr>
                <tr>Pressure</tr>
                <tr>Humidity</tr>
                <tr>Visibility</tr>
            </React.Fragment>
        </table>
    )


const rightColumnBuilder = () => 
    return (
        <table>
            <React.Fragment>
                <tr>10 m/s</tr>
                <tr> 100 kPa </tr>
                <tr>20 %</tr>
                <tr>2 Km</tr>
            </React.Fragment>
        </table>
    )


ReactDOM.render(<App />, document.querySelector("#app"));

.main-container 
  background-color: lightgray;
  width: 60vw;
  height: 50vh;
  position: relative;
  left: 15vw;
  display: flex;


.weather-box 
  text-align: left;
  background-color: gray;
  width: 30%;
  height: inherit;
  border-radius: 16px;

.weather_information .left_column 
  float: left;
  position:absolute;
  text-align: left;

  font-size: 16px;
  font-weight: 700;



.weather_information .right_column 
  float: right;
  position: absolute;
  text-align: right;
  left: 80%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

JSFiddle here,

我希望最右边的表格贴在 div 容器的边缘。

---

我尝试了左右表类div之间float:left和float:right的多种组合，我也尝试过更改显示。

我知道我可以使用一些手动的 left: x % 属性，但我相信这会使我的应用在调整大小时看起来很糟糕。一定有办法让表格贴在 div 的边缘。有人知道吗？

【参考方案1】：

对于该模型，无需使用float 和absolute，这会导致不必要的问题。我建议你看看css grid 和flex-box。

我对代码做了一些重大的修改，以使用 Grid 而不是浮点数/绝对值，虽然不完整，但我相信这是一个好的开始。

另外，你有trs 外部表，这些表本身可以使用一些额外的标签（thead、tbody）、tr + td 等，当你在时不需要使用 React.Fragment返回单个父 div。

最后，这有点吹毛求疵，但请保持您的 css 类一致，不要将破折号与下划线混用。

function App() 
    return (
        <div className="main-container">
             <div className="weather-box"></div>
             <div className="weather-information">
               <div className="left-column">
                  leftColumnBuilder()
               </div>
               <div className="right-column">
                  rightColumnBuilder()
               </div>
            </div>
         </div>
  )


const leftColumnBuilder = () => 
    return (
        <div>
                <span>Wind</span>
                <span>Pressure</span>
                <span>Humidity</span>
                <span>Visibility</span>
        </div>
    )


const rightColumnBuilder = () => 
    return (
        <div>
                <span>10 m/s</span>
                <span>100 kPa </span>
                <span>20 %</span>
                <span>2 Km</span>
        </div>
    )


ReactDOM.render(<App />, document.querySelector("#app"));

.main-container 
  background-color: lightgray;
  width: 60vw;
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 50vh;


.weather-box 
  border-radius: 16px;
  background-color: gray;


.weather-information 
  display: grid;
  grid-template-columns: 1fr 1fr;
  // padding: 0 1rem;
  align-items: center;


.weather-information .left-column 
  font-size: 16px;
  font-weight: 700;


.weather-information .right-column 
  text-align: right;


.weather-information span 
  display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

【讨论】：

非常感谢你提供这个详细的解决方案，不，这不是挑剔，你说得对，我需要保持一致。再次感谢所有这些提示！

【参考方案2】：

你最好像上面的答案那样使用 flexbox，它会在未来为你省去很多麻烦。

但在您的示例中，您可以将 left: 80% 替换为 right: 2px，或者您希望它具有的任何填充，see fiddle