Динамическое разделение начальной загрузки, похожее на таблицу с двумя столбцами

Question

поэтому я искал в Интернете, но не могу получить то, что ищу, и простите меня, потому что я не знал, как дать этому четкое название, поскольку то, что я хочу, является конкретным.

У меня есть множество данных (из sqlserver db), которые я хочу показать пользователям моего сайта, я решил, что лучший способ показать данные в формате двух столбцов, поэтому слева и справа от которыхвсе подразделения.

<div class="leftCol">
  <div class="row" id="left1" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="left2" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="left3" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
</div>
<div class="rightCol">
  <div class="row" id="right1" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="right2" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
  <div class="row" id="right3" runat="server">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
  </div>
</div>

Это должно дать мне что-то вроде следующего:

Теперь, если вы посмотрите внимательно (я знаю, трудно сказать) но есть четкое разделение между левым и правым столбцами (вместо границы).

Проблема, однако, пока это работает, все мои строки данных могут быть сделаны невидимыми в мелодии left1.visible = false или display = none, если к ним не прикреплены данные. таким образом, мы получаем странную сетку, которая выглядит следующим образом.

Теперь я думаю, что было бы лучше, если бы все было смещено вверх, чтобы это выглядело следующим образом

Однако я не уверен, как сделать границы для этого, поэтому я думаю, что могу удалить левое и правое деление и используя столбцы начальной загрузки, я могу манипулировать им, чтобы каждое деление строки данных было6 столбцов, так что таким образом я всегда получу по два на один ряд, если это необходимо.

 <div class="container">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data1" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data2" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data3" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data4" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data5" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="data6" runat="server">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Title</div>
        <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">Data</div>
      </div>
    </div>

Использование этих строк (которые теперь являются столбцами) и их отсутствие будет иметь значение, и я получу желаемый эффект, однакокроме одной вещи, как я могу ограничить это, я могу пойти по пути предоставления границы целым строкам (теперь столбцам), но как мне поступить с последним, если число элементов данных имеет нечетное число. Плюс это будет означать, что границы между поперечным сечением границы div будут сильнее, чем снаружи, так как у вас будут границы слева, справа, снизу и сверху.

Кто-нибудь знает, как решить эту проблему?

Answer 1

Для всех, кому удалось найти решение моей проблемы, я подумал, что будет лучше, если кто-нибудь столкнется с той же проблемой. Поэтому после исследования и проработки я сумел стилизовать большинство делений с помощью css, используя следующие элементы, чтобы сделать границу 0.

div[class^="col"]

При этом вы можете указать первый столбец, последний столбец, даже пронумерованные,Поэтому я смог включить и выключить границу для определенных подразделений.

Я бы сказал, что мое решение было намного более сложным, так как смещение вещей вверх или в сторону в зависимости от того, отсутствуют ли данные, создает больше проблем для пользователя. В конечном итоге мы решили, что у нас должны быть левые и правые столбцы, как в предыдущей попытке, но мы должны иметь их, чтобы мы могли сбалансировать и левый, и правый ряды. Таким образом, если бы у нас было всего 8 рядов, то было бы по 4 в каждом. Если у нас было 9, то 5 слева и 4 справа и так далее.

Я сделал это, добавив левый и правый повторитель, чтобы повторить строки с первой попытки, и в коде было следующее, чтобы разбить данные на две части.

 int totalRows = dt.Rows.Count;
 int halfway = (int)Math.Ceiling((float)totalRows / 2);
 LeftDataTable = dt.AsEnumerable().Take(halfway).CopyToDataTable();
 RightDataTable = dt.AsEnumerable().Skip(halfway).Take(totalRows - halfway).CopyToDataTable(); 

Используя это, я теперь могу добавить его к нашему повторителю, поэтому независимо от того, сколько строк у нас есть в общей сложности, чтобы показать, он всегда будет уравновешивать левый и правый столбцы.