Question

您好我有一个动态页面，显示所有具有不同数据的表组。我已经使用百分比定义了数据单元格的宽度。我的问题是有些列不显示数据，这意味着并非所有表都以相同的宽度显示。在美学上它看起来很糟糕，我想保持它们的宽度相同。有没有办法在css中执行此操作而不必使用像素作为宽度？这是我目前的css：

＆＃13;

    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.6</version>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <source>1.7</source>
                <target>1.7</target>
            </configuration>
        </plugin>
    </plugins>

＆＃13;

table.motionEventsTable {
  margin: 0 auto;
  width:90%;
  word-wrap:break-word;
}
table.motionEventsTable td:nth-child(1){width:18%;} /* first column */ 
table.motionEventsTable td:nth-child(2){width:15%;} /* second column */ 
table.motionEventsTable td:nth-child(3){max-width:15%; word-wrap:break-word;} /* third column */ 
table.motionEventsTable td:nth-child(4){width:22%;} /* fourth column  */ 
table.motionEventsTable td:nth-child(5){width:30%;} /* fifth column */

＆＃13;

Answer 1

如果我正确理解您的问题，只需在表格中使用table-layout: fixed;即可完全符合您的要求。

这会将所有列捕捉到相同的宽度，除非您为某些列指定特定宽度，在这种情况下，剩余空间在非指定列之间均匀分布。

Answer 2

有一个表格属性：table-layout，如果你在CSS中使用值固定：table-layout:fixed;它会给你相同的宽度对于每一列。

在此处查看其工作原理： CSS table-layout Try It Yourself

数据丢失时保持表格单元格的宽度一致

2 个答案: