列宽问题

Question

ISSUE DEMO

在HTML表格中，在选择第1行中的项目时，第2行可见（表格有2列）。

现在在第2行，列宽缩小，以蓝色突出显示。为什么会这样？

一直试图冲浪几天，但似乎都没有工作。

如果有人指出错误的话会很有帮助。

＆＃13;

＆＃13;

FROM ubuntu:16.04
FROM python:3.5
ENV PYTHONUNBUFFERED 1

RUN cat /etc/passwd
RUN cat /etc/group

RUN apt-get update && apt-get install -y \
    apache2 \
    apache2-dev \
    libapache2-mod-wsgi-py3 \
    autoconf \
    libssl-dev
RUN apt-get install -y openssl
RUN mkdir /var/run/sshd

ENV APACHE_RUN_USER www-data
ENV APACHE_RUN_GROUP www-data
ENV APACHE_LOG_DIR /var/log/apache2
ENV APACHE_LOCK_DIR /var/lock/apache2
ENV APACHE_PID_FILE /var/run/apache2.pid

# The Umich IAM copy of Cosign includes Apache 2.4 support
RUN wget https://github.com/umich-iam/cosign/archive/master.tar.gz
RUN tar xfz master.tar.gz
RUN cd cosign-master
RUN autoconf
RUN ./configure --enable-apache2=`which apxs`
RUN make
RUN make isntall
RUN mkdir -p /var/cosign/filter
RUN chown www-data:www-data /var/cosign/filter

RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD . /code

EXPOSE 80


# Update the default apache site with the config we created.
COPY 000-default.conf /etc/apache2/sites-enabled/000-default.conf

RUN chown -R root:www-data /var/www
RUN chmod u+rwx,g+rx,o+rx /var/www
RUN find /var/www -type d -exec chmod u+rwx,g+rx,o+rx {} +
RUN find /var/www -type f -exec chmod u+rw,g+rw,o+r {} +

#essentially: CMD ["/usr/sbin/apachectl", "-D", "FOREGROUND"]
CMD ["/tmp/start.sh"]

＆＃13;

function showDiv(select){
   if(select.value==2){
    document.getElementById('future_date').style.display = "block";
   } else{
        document.getElementById('future_date').style.display = "none";
   }
} 

＆＃13;

.table1 {
  color: #2a2929;
  padding-top: 20px;
  margin-bottom: 7px;
  text-align: center;
}

.col-md-12 {
  width: 100%;
}

.table1 table {
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: grey;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 25px;
}

.table-text-filed{
  width:100%;
  border:1px solid #d4d5d7;
  color:#2a2929;
  text-align: center;
}

.body {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-family: calibri;
}

.table1 td {
  padding: 5px;
  background-color: white;
}

.table1 tr {
  padding: 5px;
  background-color: blue;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我在演示链接中看到的是2列显示但是1和2都是一个接一个地显示，而不是像表格单元格。原因是你将display属性设置为阻止。改为使用table-row。

替换以下行

document.getElementById('future_date').style.display = "block";

用

document.getElementById('future_date').style.display = "table-row";

希望这有帮助。

Answer 2

将显示值从'block'更改为'table-row'

function showDiv(select){
   if(select.value==2){
    document.getElementById('future_date').style.display = "table-row";
   } else{
        document.getElementById('future_date').style.display = "none";
   }
} 

.table1 {
  color: #2a2929;
  padding-top: 20px;
  margin-bottom: 7px;
  text-align: center;
}

.col-md-12 {
  width: 100%;
}

.table1 table {
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: grey;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 25px;
}

.table-text-filed{
  width:100%;
  border:1px solid #d4d5d7;
  color:#2a2929;
  text-align: center;
}

.body {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-family: calibri;
}

.table1 td {
  padding: 5px;
  background-color: white;
}

.table1 tr {
  padding: 5px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-12 table1">
  <table border="1">
    <tr>
        <td col width="40%">Type</td>
        <td>
            <select name="token_date_id" onchange="showDiv(this)" class="table-text-filed" required>
                <option value="1">Today</option>
                <option value="2">Future Date</option>
            </select>
        </td>
    </tr>
    <tr id="future_date" style="display:none">
        <td  col width="40%">Select Date</td>
        <td>
            <input type="date" name="token_date" value="" class="table-text-filed" data-date='{"startView": 2}'>
        </td>
    </tr>
  </table>
</div>