CSS not applying to table in custom SP2013 layouts page

Question

I am creating a custom edit/display/new forms for custom lists, using custom controls. This is a VS farm solution, for an on-premises scenario.

The layout is done in HTML tables, since they need to be fixed in size. The problem is that SharePoint somehow overrides my styles. I've tried checking with Developer tools, and it seems that there is nothing generic applied to the table,tr,td elements. But even from there, when I add some inline styles dynamically, they are ignored.

Is there any way to use custom styles over builtin? Maybe some way of resetting generic CSS just for those pages?

EDIT

From my .master:

<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
<SharePoint:CssRegistration Name="/_layouts/15/TMPL/Styles/tmpl.css" runat="server" After="corev15.css" ID="tmpl_css_0" />

From tmpl.css:

table.hdis_tblUp{
border-width: 1px !important;
border-collapse: collapse;
}

table.hdis_tblUp td{
border-width: 1px !important;
}

From my .aspx:

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div id="divUp">
    <asp:table CssClass="hdis_tblUp" runat="server">
        <asp:TableRow>
            <asp:TableCell>
             ...

The styles, looking from Developer tools seem to be applied:

And yet they are not visible:

Answer 1

in your page make sure there is no reference to core.css.... issue is due to masterpage which has that reference that the page your using could be referencing the masterpage.

several methods:

1) if its referencing a masterpage than make a custom masterpage that is almost the same only that it doesnt contain the core.css reference.

2) within your css add !important:

.myclass
{
  width:100px !important;
}

that will overwrite the core.css or anyother css.

3) what controls are you using, are they sharpeoint controls or purely html controls. If its sharepoint than they inherit the same css styles as any sharepoint table... if its html than it wont.

within developer tools, check to see what .css files are loaded:

open developer tools -> click on css tab -> on drop down what css files do you see? do you see any core styles?

you say its a vs farm solution, i presume the pages are aspx, are the controls asp.net or sharepoint controls?

using sharepoint controls

<SharePoint:

using asp.net controls

<asp:

EDIT

within the masterpage, it procedural.... so you just need to set the core.css to load first and then load your custom css. That way it loads the default css for all other controls and then loads your custom css on top. Sometimes you need the !important attribute to overwrite sharepoint css as it also has !important within core.css aswell... but thats not always the case and very rare!

could you post in your question how your css reference looks in your masterpage? and I can show you how it would work!

EDIT

css case i think this is what your trying todo:

table.hdis_tblUp tr td{
border-width: 1px !important;
}

EDIT

cant see more of your html code but give this a try:

table.hdis_tblUp
{
   border: 1px solid black !important;
   border-collapse: collapse;
}

table.hdis_tblUp td
{
   border: 1px solid black !important;
}

you should be doing it on the border rather than border-width , border-width would make it fat or skinny but we can add that all in one place.

you need to state the thickness (px), the type of border (solid, dashed... ect) and the colour. The example i have given will give you a solid black border all round with a thickness of 1 pixel.

without stating the above it would fail and the css would not be implemented, like what has happened in your case!

Answer 2

You could insert a Content Editor Web Part (CEWP) into the page and then create and upload a css style sheet where you assign attributes to the classes/parts you want and use "!important" -parameter on the attributes if they don't work. Example below:

.class-name {

    attribute: value !important;
}

Then just enter the CEWP toolbox/options menu and reference your style sheet there (for example /SiteAssets/custom_styles.css).

P.S. Once you have the CEWP with the style sheet in place, you can use Sharepoint Designer to modify the style sheet and then save and refresh the page to see if any changes are carried over like you want. Also remember you can use browser developer tools (press F12) to search for elements and classes and try out attributes/values.

I hope this helps! :)