Как сделать длину и ширину между «Графика» умеренными

Question

Я хочу, чтобы длина и ширина фигуры имели правильное расстояние. Но это не было гладко.

Мне нужно одинаковое расстояние для "tr" и "th". Как этот эффект:

Расстояние между графиками всегда различно.

Как я могу это сделать?

Ниже мой код ， Неверное расстояние между элементами.

Спасибо

fieldset.scheduler-border {
  border: solid 3px #000000 !important;
  padding: 10px 10px 10px 10px;
  border-bottom: none;
}

legend.scheduler-border {
  width: auto !important;
  border: none;
  font-size: 36px;
}

tr {
  display: block;
  margin: 1px 0;
}

<form>
  <fieldset class="scheduler-border">
    <legend class="scheduler-border"> Test </legend>
    <table id="ConnectionMonitorTable">
      <thead>
        <tr>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect> />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>

          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
          <th width="50%">
            <svg width="150" height="100">
                            <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
        </tr>
        <tr>
          <th width="50%">
            <svg width="150" height="100">
                            <rect  width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
                            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
                        </svg>
          </th>
        </tr>
      </thead>
    </table>
  </fieldset>
</form>

Большое вам спасибо

Answer 1

Я бы подошел к этому, используя CSS Grid. Помимо окружения каждого блока оболочкой div, я создал несколько базовых c правил сетки. Тип сетки использует автоматическое размещение . При использовании grid-gap дочерние элементы сетки будут иметь интервал между ними не менее 30px. Если страница очень широкая, разрыв естественно увеличится. Надеюсь, вы сможете увидеть мощь CSS Grid для обработки макетов, подобных этой.

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  …
}

Демо

fieldset.scheduler-border {
  border: solid 3px #000000 !important;
  padding: 10px 10px 10px 10px;
  border-bottom: none;
}

legend.scheduler-border {
  width: auto !important;
  border: none;
  font-size: 36px;
}

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  padding: 0 30px 15px;
}

.item-container .item:not(:first-child) {}

<form action="">
  <fieldset class="scheduler-border">
    <legend class="scheduler-border"> Test </legend>

    <div class="item-container">
      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

      <div class="item">
        <svg width="150" height="100">
          <rect width="150" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>
        </svg>
      </div>

    </div>

  </fieldset>
</form>

jsFiddle