CODEWITHSUNDEEP
htmlcss
COCO
COCO

Reputation: 158

Eliminating line breaks when using HTML Tables in a Web Application

I'm running into an issue with my application/browser prepending line breaks, on top of an HTML table, that is within a display form. I highlighted the space with the line breaks and did an inspect in the web browser. I was able to successfully use 

div br{
    display: none;
}

to eliminate the line breaks, however, this action also removes all other line breaks in other HTML components of the application. My experience with CSS/HTML is very limited, so I'm asking for input, on how the line breaks in the form itself may be removed using CSS, without affecting other HTML components in the application.

enter image description here

Upvotes: 0

Views: 122

Answers (1)

Jakob
Jakob

Reputation: 3546

You should fix whatever generates that much <br> tags.

But to remove it with CSS inside specific element you should target <br> tags inside that element.

So if you wan't to remove <br> tags inside <p class="form-item form-desc bound-visible"> then target it like this in CSS:

.form-item br {
  display: none;
}

If you want to target element with multiple classes do it like this:

.form-item.form-desc.bound-visible br {
  display: none;
}

If you have multiple forms and elements with class form-item then you could add id to your forms and then target just form you need.
Something like this https://jsfiddle.net/py9n7xwe/

Upvotes: 2

Related Questions