Как сделать так, чтобы граница с нижней границей была длиннее с помощью CSS

Я считаю, что шрифт, который вы ищете, таков:

http://www.dafont.com/ballpark-weiner.font

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

Используйте 3 перед установкой 1 и 3 после этого.. как это

<td class="text_plant_address"> <span class="text_plant">&nbsp;&nbsp;&nbsp;Plant 1&nbsp;&nbsp;&nbsp;</span>

Я знаю, что это не лучший ответ, но надеюсь, что это поможет, и вы можете увеличить в соответствии с u

Вы можете переместить нижнюю границу границы из text_plant и сделать ее верхней границей на text_address следующим образом: http://jsfiddle.net/QTNr5/2/

table tr td .text_plant {

}
table tr td .text_address {
    font-size: 10px;
    border-top: 1px solid #D0D0D0;
    padding-top: 4px;
}

Или, если вы хотите, чтобы это было короче, вы можете добавить padding let и right к вашему text_plant следующим образом: http://jsfiddle.net/QTNr5/4/

table tr td .text_plant {
    border-bottom: 1px solid #D0D0D0;
    padding:0 20px;
}

Вы можете изменить свои интервалы на divs и удалить Br. Divs будет отображаться как блоки по умолчанию, поэтому они занимают всю ширину td. Я изменил вашу скрипку, чтобы показать divs. Если вы не хотите, чтобы он касался краев окна, добавьте отступы в ваш тд.

http://jsfiddle.net/mrNXW/

<td>
  <div class="plant">Plant 1</div>
  <div class="address">Street 2, Dong An Industrial Park</div>
</td>

<edit> вопрос непонят, ответ дает нижнюю границу, красную, белую и красную снова :) красный на внешних частях.... </edit>

Вы можете использовать псевдоэлемент, чтобы нарисовать красную часть: http://codepen.io/anon/pen/axvgl/

td {
  text-align:center;
}
.text_plant {
  font-size:2em;
  border-bottom:solid white;
  box-shadow:
    0 1px 0 gray, 
    inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
  content:'';
  display:inline-block;
  width:1.25em;
  box-shadow:inherit;
  border-bottom:solid red;
  margin-bottom:-3px;/* size of border*/
  vertical-align:bottom;
}

Или используйте градиент http://codepen.io/anon/pen/ftmDn/

td {
  text-align:center;
}
.text_plant {
  display:inline-block;
  font-size:2em;
  padding:0 1em;
  box-shadow:
    0 1px 0 gray;

  background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
  background-size:100% 3px, 100% 4px ;
}

Конечно, попробуйте добавить: padding: 10px 0 в <span>.